How to set default value to select menu in Vue.js
Last Updated: December 6, 2020
I need to set the default value to the select Dropdown in Vue.js component. This is very useful when you edit a form
I am retrieving the data from REST API end point
This is what I have in template section of the component
<div class="select is-small"> <select v-model="category"> <option v-for="(category, index) in categories" :value="category.id" >{{category.name}}</option> </select> </div>
I have named the model v-model=”category” which is defined in data() section
data () { return { category:'' } },
In the mount()
, I am going to set the default value
mounted () { axios.get('api/products/'+this.$route.params.id) .then(response => { this.product = response.data.data this.category= this.product.category.id }) .catch(error => { console.log(error); }); }
Here I am getting the category id from the product and assign it to category.
Now you have set the default value as shown on the following image
