How can I set selected option selected in vue.js 2?
My component vue is like this :
-
The simplest answer is to set the selected option to
trueorfalse.<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 } }讨论(0) -
<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; }); }讨论(0) -
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.
讨论(0) -
Handling the errors
You are binding properties to nothing.
:requiredin<select class="form-control" v-model="selected" :required @change="changeLocation">and
:selectedin<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
dataproperty calledselectedso 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-modelapproach 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>
讨论(0)
加载中...
- 热议问题