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

September 7, 2019

I need to set the deault value to the select dropdown in Vue.js compoenent

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