Today, when using vue to implement the selected drop-down box, I found that after binding attributes with v-model, the selectbox that originally displayed the first item by default became blank, and specifying the selected attribute in the option tag had no effect. So I summarized how to implement the default values of the drop-down box under different attribute types. These methods also apply to select selectors in element-ui.
1. Radio drop-down box set default value
Define a property in data and assign it a default value, and bind it in the select tag using the v-model directive.
(1) Click to view the vue component section<template>
<div>
<select name="" id="id1" v-model="education">
<option disabled value="selecteducation"> Please select your academic qualifications</option>
<option value="highschool" > high school</option>
<option value="undergraduate"> Undergraduate</option>
<option value="master"> master</option>
<option value="doctor"> doctor</option>
</select>
</div>
</template>
<script>
export default {
data(){
return {
education:'',
}
},
created(){
this.education = 'undergraduate';
}
}
</script>
2. Multiple Selection Dropdown Box
The multiple-select drop-down box specifies the multiple property of the select tag. Similar to radio, the difference is that when multiple selection uses the v-model directive to bind array properties, all selected option values are saved in the array. So initialize this property as an array type in data
(1) Click to view the vue component section<template>
<div>
<select name="s2" id="id2" v-model="searches" multiple>
<option :value="o.value" v-for="(o, i) in options" :key="i">{{o.name}}</option>
</select>
<h3>Search Engines:{{searches}}</h3>
</div>
</template>
<script>
export default {
data(){
return {
searches:['Sohu.com'],
options:[
{value:'Baidu.com', name:'Baidu'},
{value:'Google.com', name:'Google'},
{value:'Sohu.com', name:'Sohu'},
{value:'Bing.com', name:'Bing'},
]
}
},
created(){
// this.searches = this.options[2].value
}
}
</script>
3. Get the value of the calculated property
You also need to initialize the default value in the data and assign the resulting value of the calculated property to it. Here's a code example using the multiple-select drop-down box.
(1) Click to view the vue component section<template>
<div>
<select name="s2" id="id2" v-model="searches" multiple>
<option :value="o.value" v-for="(o, i) in options" :key="i">{{o.name}}</option>
</select>
<h3>Search Engines:{{searches}}</h3>
</div>
</template>
<script>
export default {
data(){
return {
searches:[],
options:[
{value:'Baidu.com', name:'Baidu'},
{value:'Google.com', name:'Google'},
{value:'Sohu.com', name:'Sohu'},
{value:'Bing.com', name:'Bing'},
]
}
},
computed:{
defaultSearches(){
let reslist = ['Bing.com','Sohu.com'];
this.searches = reslist;
return reslist
}
},
created(){
this.defaultSearches(); // Execute after instance creation
}
}
</script>
4. Notes
(1) In Html code, the selected value can be obtained by v-model. If the value attribute exists in the option, the value value will be obtained first. If it does not exist, the text content of the option will be obtained.
(2) The data attribute bound by the V-model instruction must be initialized in the data first;
(3) After using the v-model binding property, the default value cannot be achieved by using the selected property in the option tag, and the selection box appears blank. The attribute needs to be assigned a determined value when it is initialized