Showing initial v-model value on selectbox-CodePudding

I have a selectbox in vue that has initial v-model value and i want to show its value on the selectbox but actually i do not know how to do it . i would really appreaciate if someone can help

new Vue({
  el: "#demo",
  data() {
    return {
    newRecordDurationName: '2min',
           recordDuration: [
        { id: 1, name: "2 min" },
        { id: 2, name: "5 min" },
        { id: 3, name: "10 min" },
        { id: 4, name: "15 min" },
        { id: 5, name: "30 min" },

      ],
    };
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" >

<select
              v-model="newRecordDurationName"
              
              name=""
              id=""
            >
              <option
                v-for="type in recordDuration"
                :key="type.id"
                :value="type.id"
              >
                {{ type.name }}
              </option>
            </select>
            </div>

CodePudding user response：

You need to set the id of the required value to your v-model (newRecordDurationName) not the name. check the below update code. So if you want '2min' to be the default value then set 1, if you want '10 min' as default value then set v-model to 3,.. like that

new Vue({
  el: "#demo",
  data() {
    return {
    newRecordDurationName: 1,
           recordDuration: [
        { id: 1, name: "2 min" },
        { id: 2, name: "5 min" },
        { id: 3, name: "10 min" },
        { id: 4, name: "15 min" },
        { id: 5, name: "30 min" },

      ],
    };
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" >

<select
              v-model="newRecordDurationName"
              
              name=""
              id=""
            >
              <option
                v-for="type in recordDuration"
                :key="type.id"
                :value="type.id"
              >
                {{ type.name }}
              </option>
            </select>
            </div>

CodePudding user response：

Actually this is a mistake that i am setting id and showing data if i give an id to v-model it will work