使用Component和<select>输入的Vue对象同步

Question

我需要使用输入在Vue的父级和子级组件之间同步对象，但语法不正确。 零件： <模板>   

            {{variable.name}}     

  

Answer 1

发射<select>值

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

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

<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