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?
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.
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.
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.
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>
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>
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>
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 } }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With