对象事件出现在焦点输出的输入字段中

Question

我正在开发 VueJS 应用程序，它允许使用特定数据编辑 json 文件。我有两个类似的组件：AliasEntry 和 EquipmentEntry。第二个用于操作对象数组并且似乎工作正常。我可以添加、删除和编辑字段。但是提供别名（字符串）数组的 AliasEntry 表现得很奇怪并且崩溃：当我单击其中包含实际字符串的输入并对其进行编辑时，更改会在 props 中更新。但是，当我单击输入之外时，它的内容会被“[object Event]”替换，并且执行任何操作都会使应用程序崩溃，并显示错误“无法在“窗口”上执行“structedClone”：无法克隆事件对象。”

这是 AliasEntry 组件的代码

<template>
  <div>
    <input 
    :value="item" 
    @input="(event) => handleAliasUpdate(event)"
    >
  </div>
</template>

<script>
import { toRaw } from 'vue'
export default {
  props: {
    item: String
  },
  methods: {
    handleAliasUpdate(event){
      const record = structuredClone(toRaw(event.target.value))
      this.$emit('change', record)
    }
  }
};
</script>

我尝试添加 toRaw，因为它之前有帮助，但我现在不知所措。 注意：我想这个错误（“无法执行'structedClone'...）发生在包含组件中。

Answer 1

问题似乎可能与您在

handleAliasUpdate

方法中处理事件对象的方式有关。

直接使用

event.target.value

而不使用

toRaw

，因为

event.target.value

已经是你想要的原始值了。

删除

structuredClone

函数，因为在此上下文中没有必要，并且可能会导致错误。

你可以这样做：

<template>
  <div>
    <input 
      :value="item" 
      @input="handleAliasUpdate"
    >
  </div>
</template>

<script>
export default {
  props: {
    item: String
  },
  methods: {
    handleAliasUpdate(event) {
      const newValue = event.target.value;
      this.$emit('change', newValue);
    }
  }
};
</script>

希望这对您有帮助。