使用组件和 <Select> 输入的 Vue 对象同步

Question

我需要使用 <select> 输入在 Vue 中的父组件和子组件之间同步一个对象，但无法获得正确的语法。

组件：

<template>    
  <div>
    <select :value="condition" @change="$emit('update:condition', $event.target.value)">
      <option v-for="variable in variable_options" :value="variable" :key="genUniqueKey(variable)">{{ variable.name }}</option>
    </select>
  </div>
</template>

<script>
  module.exports = {
    props: ['variable_options', 'condition']
  }
</script>

我需要类似标准的 .sync 修饰符，但它似乎不适用于带有对象的选择输入：

<variable-select :variable_options="application_questions" :condition.sync="rule.condition">
</variable-select>

condition 是一个具有id、name 和type 属性的对象，这些属性来自variable 数组中的variable 对象。我试过做一个initial_condition 道具，然后像文档推荐的那样在select 输入上做一个v-model='selected_condition'，但我不知道如何将它与.sync 修饰符一起使用。使用:initial_condition.sync="rule.condition" 是不对的。

有没有办法从子组件中的选定选项传递对象属性，并响应式更新父组件？数据对象的属性是：

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

Answer 1

发出<select>值

$event.target.value 指的是HTMLSelectElement.value，它是一个字符串。该对象值将被转换为字符串（返回"[object Object]"），这将阻止.sync 正确更新原始对象。

一种解决方法是在variable_options[] 属性中使用HTMLSelectElement.selectedIndex：

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

默认<select>值

默认值是在<option>（不是<select>）上设置的。您可以根据条件的 ID 将 <option>.selected 设置为 true：

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

demo