'Showing initial v-model value on selectbox [closed]

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" class="container">

<select
              v-model="newRecordDurationName"
              class="w-75 mr-auto text-dark radius-8 py-2"
              name=""
              id=""
            >
              <option
                v-for="type in recordDuration"
                :key="type.id"
                :value="type.id"
              >
                {{ type.name }}
              </option>
            </select>
            </div>
vue.js


Solution 1:[1]

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" class="container">

<select
              v-model="newRecordDurationName"
              class="w-75 mr-auto text-dark radius-8 py-2"
              name=""
              id=""
            >
              <option
                v-for="type in recordDuration"
                :key="type.id"
                :value="type.id"
              >
                {{ type.name }}
              </option>
            </select>
            </div>

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 vineeth pappu
Solution 2 marjan

Related Questions