将数据传递给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 to :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>

​