Question

我有以下vuejs代码：

       <select v-model='selectedInverter' class="custom-select" @change="changedInverter">
           <option>Select an inverter</option>
           <template v-for="inverter in localInverters">
             <option>{{inverter.display_name}}</option>
           </template>   
       </select>

如果我console.log(this.selectedInverter)中的changedInverter，我只得到display_name而不是整个对象。如何在v-model中捕获（或绑定）整个对象？

Answer 1

关于此的文档在这里：https://vuejs.org/v2/guide/forms.html#Select

如果向下滚动到动态选项部分，您将看到可以获得所需位置的示例代码：

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

在您的情况下，您的v-bind:value数据将是整个inverter对象，其中选项文本将为您{{inverter.display_name}}。

混淆vuejs2中的v-model和select语句

1 个答案: