How to set default value to select menu in Vue.js

September 7, 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