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>>Solution :
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>