How can I set selected option selected in vue.js 2?
Javascriptvue.jsVuejs2Vue ComponentJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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 calledselected
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>
Solution 2 - Javascript
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
}
}
Solution 3 - Javascript
<select v-model="challan.warehouse_id">
<option value="">Select Warehouse</option>
<option v-for="warehouse in warehouses" v-bind:value="warehouse.id" >
{{ warehouse.name }}
</option>
Here "challan.warehouse_id" come from "challan" object you get from:
editChallan: function() {
let that = this;
axios.post('/api/challan_list/get_challan_data', {
challan_id: that.challan_id
})
.then(function (response) {
that.challan = response.data;
})
.catch(function (error) {
that.errors = error;
});
}
Solution 4 - Javascript
You simply need to remove v-bind (:) from selected and required attributes. 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>
You are not binding anything to the vue instance through these attributes thats why it is giving error.
Solution 5 - Javascript
Another way, which I often find more reliable, is you could add a directive to your app.js
or wherever you are initiating your VueJS, eg:
Vue.directive('attr', (el, binding) => {
if (binding.value === true) binding.value = ''
if (binding.value === '' || binding.value) {
el.setAttribute(binding.arg, binding.value)
}
})
You can then utilise v-attr
to set an attribute, eg:
<option value="Western Australia" v-attr:selected="form.state == 'Western Australia'">Western Australia</option>
Solution 6 - Javascript
My code for reactive multiselect
data() {
return {
article: {title: 'aaaaa', 'categoriesIds': [1,3], ...},
selectCategories: {1: 'xxx', 2: 'www', 3: 'yyy', 4: 'zzz'},
}
},
template
<div class="form-group">
<label for="content">Categories</label>
<select name="categories"
v-model="article.categoriesIds"
id="categories"
multiple
class="form-control col-md-5"
size="6">
<option v-for="(category, key) in selectCategories"
:key="key"
v-bind:value="key">{{category}}</option>
</select>
</div>
Selected items are binded to the article.categoriesIds array.