Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 957
samuel toh Avatar asked May 08 '17 02:05

samuel toh


People also ask

How can I set selected option selected in VUE JS?

We can get the selected option on change with Vue. js by setting @change to a method. We set v-model to the key reactive property bind the selected value attribute value to key . And we set @change to onChange($event) to call onChange with the change event object.

How do you get selected value of select in Vue?

Get Selected Value of Select Dropdown in VueCreated a select box inside the template syntax. Added an onChange() event handler. Created an options list, cars name primarily. Used the on-change method to grab the selected value using the event object.

How do I change the selected option?

In order to change the selected option by the value attribute, all we have to do is change the value property of the <select> element. The select box will then update itself to reflect the state of this property.


2 Answers

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> 
like image 172
Amresh Venugopal Avatar answered Sep 23 '22 10:09

Amresh Venugopal


The simplest answer is to set the selected option to true or false.

<option :selected="selectedDay === 1" value="1">1</option> 

Where the data object is:

data() {     return {         selectedDay: '1',         // [1, 2, 3, ..., 31]         days: Array.from({ length: 31 }, (v, i) => i).slice(1)     } } 

This is an example to set the selected month day:

<select v-model="selectedDay" style="width:10%;">     <option v-for="day in days" :selected="selectedDay === day">{{ day }}</option> </select> 

On your data set:

{     data() {         selectedDay: 1,         // [1, 2, 3, ..., 31]         days: Array.from({ length: 31 }, (v, i) => i).slice(1)     },     mounted () {         let selectedDay = new Date();         this.selectedDay = selectedDay.getDate(); // Sets selectedDay to the today's number of the month     } } 
like image 40
gtamborero Avatar answered Sep 21 '22 10:09

gtamborero