How can I give specific parameter to a v-model call

Question

How can I give the index of my array days, in the v-model ?

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

And:

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

Thank you for your help !

Can you show `days`? It's a bit hard to understand as it is. Do you have a `data` property called `dataList`? Or is it just a method? — acdcjunior, Mar 28 '18 at 17:58
You are missing the :value property on the option tag. Maybe this will be helpful: https://stackoverflow.com/questions/49396221/how-to-obtain-the-id-value-of-a-select-populated-with-axios-and-vue/49396435#49396435 — DobleL, Mar 28 '18 at 19:01

Sphinx · Accepted Answer · 2018-03-28T18:10:29.953

You can bind the value of <option> with specific data type as you need like v-bind:value="{ 'data': day, 'index':index }", or simply you can 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>

How can I give specific parameter to a v-model call

1 Answers1