javascript - 如何为 v-model 调用提供特定参数

Question

如何在 v-model 中给出我的数组天数的索引？

<select v-model="dayList" id="dayList">
    <option v-for="(day, index) in days" :key="index">{{ selectDaysLabel(day) }}</option>
</select>

和：

dayList(index) {
  console.log(index) // should give you either 0, 1, 2...
}

谢谢您的帮助 ！

Answer 1

您可以根据需要将 的值<option>与特定的数据类型绑定v-bind:value="{ 'data': day, 'index':index }"，或者您也可以v-bind:value="index"。

new Vue({
    el: "#app",
    data: {
        selectedDay: '',
        days: ['A', 'B', 'C', 'D']
    },
    methods: {
      getSelect(){
        console.log(this.selectedDay ? this.selectedDay.index : 'No selection')
      }
    }
});

<script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
<div id="app">
<button v-on:click="getSelect()">Test</button>
<select v-model="selectedDay" >
    <option v-for="(day, index) in days" v-bind:value="{ 'data': day, 'index':index }">{{day}}</option>
</select>
</div>