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

Question

My component vue is like this :

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

I use this : <option :selected>Choose Province</option> to selected

But whene executed, on the gulp watch exist error

The error like this :

ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-53777228!./~/vue-load er/lib/selector.js?type=template&index=0!./resources/assets/js/components/bootst rap/LocationBsSelect.vue Module build failed: SyntaxError: Unexpected token (28:4)

Seems my step is wrong

How can I solve it?

Answer 1

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

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

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

2. 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?

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

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

3. 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>