VueJS中AliasEntry组件输入框失焦显示[object Event]崩溃问题

核心问题 #

1. 输入框显示[object Event]：父组件的数组项被错误赋值为Event对象，而非子组件传递的字符串值。
2. structuredClone崩溃：父组件对数组进行克隆操作时，遇到无法被克隆的Event对象（Event属于浏览器内置对象，不支持结构化克隆）。

子组件修复（AliasEntry） #

你的组件代码存在两处冗余且可能引发问题的操作：

• 模板中使用箭头函数传递event完全多余，Vue会自动为事件处理函数注入事件对象；
• 对字符串使用toRaw和structuredClone毫无意义（字符串是原始值，本身不存在响应式包装，也不需要克隆）。

修改后的组件代码：

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

<script>
export default {
  props: {
    item: String
  },
  methods: {
    handleAliasUpdate(event){
      // 直接获取输入框的字符串值，无需额外处理
      this.$emit('change', event.target.value)
    }
  }
};
</script>

父组件检查 #

请确认父组件处理change事件的逻辑是否正确，确保将子组件传递的字符串值赋值给数组项，而非错误传递Event对象。例如正确的父组件用法：

<template>
  <div>
    <AliasEntry
      v-for="(alias, idx) in aliasList"
      :key="idx"
      :item="alias"
      @change="aliasList[idx] = $event"
    />
  </div>
</template>

<script>
import AliasEntry from './AliasEntry.vue'
export default {
  components: { AliasEntry },
  data() {
    return {
      aliasList: ['alias1', 'alias2']
    }
  }
}
</script>

关键说明 #

• 原始代码中structuredClone(toRaw(event.target.value))的操作不仅多余，还可能在某些场景下意外引入问题；
• 确保父组件中没有将Event对象直接赋值给数组项，这是导致输入框显示[object Event]和克隆崩溃的根本原因。

内容的提问来源于stack exchange，提问作者XesIhma