How can I set selected option selected in vue.js 2?

javascript, vue-component, vue.js, vuejs2

Solution

Handling the errors

You are binding properties to nothing. `:required` in

<select class="form-control" v-model="selected" :required @change="changeLocation">

and `:selected` in

<option :selected>Choose Province</option>

If you set the code like so, your errors should be gone:

<template>
  <select class="form-control" v-model="selected" :required @change="changeLocation">
    <option>Choose Province</option>
    <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
 </select>
</template>

Getting the select tags to have a default value

you would now need to have a `data` property called `selected` so that v-model works. So,

{
  data () {
    return {
      selected: "Choose Province"
    }
  }
}

If that seems like too much work, you can also do it like:

<template>
  <select class="form-control" :required="true" @change="changeLocation">
   <option :selected="true">Choose Province</option>
   <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
  </select>
</template>

When to use which method?

You can use the `v-model` approach if your default value depends on some data property.

You can go for the second method if your default selected value happens to be the first `option`.

You can also handle it programmatically by doing so:

<select class="form-control" :required="true">
  <option 
   v-for="option in options" 
   v-bind:value="option.id"
   :selected="option == '<the default value you want>'"
  >{{ option }}</option>
</select>

Problem

Original source