Vue.js 使用组件和<；进行Vue对象同步；选择>；输入

我需要使用

输入在Vue中的父组件和子组件之间同步对象，但无法获得正确的语法

组成部分：

条件

是一个具有

id

、

名称

和

类型

属性的对象，这些属性来自

变量

选项数组中的

变量

对象。我试过做一个

初始条件

道具，然后在

选择

输入上做一个

v-model='selected\u条件

，就像文档推荐的那样，但我不知道如何使用

.sync

修改器。执行

：初始条件.sync=“rule.condition”

不正确

是否有方法从子组件中的选定选项传递对象属性，并以反应方式更新父组件？数据对象的属性包括：

rule: {
  condition: {
    id: '',
    name: '',
    type: ''
  }
}

发出

值

$event.target.value

指的是一个字符串。此对象值将转换为字符串（返回

“[对象对象]”

），这将阻止

.sync

正确更新原始对象

解决方法是使用

HTMLSelectElement。将selectedIndex

放入

变量选项[]

属性：

<select @change="$emit('update:condition', variable_options[$event.target.selectedIndex])">

---

$event.target.selectedOptions[0]。\u值

会更好，我认为似乎正在更新父项。但是，您知道为什么我的初始属性值不会反映在

输入的初始状态中吗？它只是默认为列表中的第一个选项<代码>规则.条件被发送到

条件

道具，并且

变量

中的每个

变量

都具有相同的结构，因此我认为它会找到匹配项并在select？@TravisSmith中反映该选项。默认选择值由

设置。selected

（而不是

value

）。

rule: {
  condition: {
    id: '',
    name: '',
    type: ''
  }
}

<select @change="$emit('update:condition', variable_options[$event.target.selectedIndex])">

<option v-for="variable in variable_options"
        :selected="condition.id === variable.id"
        ...>