将数据传递给 v-model

Question

如何将索引从选项传递到 select 中的 v-model？

<select v-model="selectedItem">
    <option v-for="item, index" in list" :index="index">{{item}}</option>
</select>

selectedItem只存储项目，没有索引。 如何获取选项索引，例如selectedItem.index ？

Answer 1

您可以将option标签值绑定到index ：

<select v-model="selectedItem">
    <option v-for="item, index" in list" :value="index">{{item}}</option>
</select>

selectedItem然后将成为所选项目的索引，您不需要同时拥有项目及其索引，因为它是多余的：

const item = this.list[this.selectedItem];

Answer 2

如果您希望将索引存储在selectedItem.index上，那么您必须将v-model设置为selectedItem.index

除此之外，您需要将:index更改为:value并使用v-for修复语法问题

 new Vue({ el: '#app', data: { selectedItem: {}, list: [5, 6, 7, 8, 9] } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <select v-model="selectedItem.index"> <option v-for="(item, index) in list":value="index">{{item}}</option> </select> <pre>{{selectedItem}}</pre> </div>