I searched online for Vuejs2.0 dynamic cascading select for a long time but failed. I decided to summarize my own experience and the application of select in version 2.0. First of all, let me talk about the technology I use. I have referred to my mature experience online and chose a family bucket with 2.0+Vue-router+Vuex.
Select first needs to distinguish between single-choice and multiple-choice. v-model has a difference between single-choice and multiple-choice.
select single-select example:
<select v-model="fruit">
<option selected value="apple">apple</option>
<option value="banana">banana</option>
<option value="watermelon">watermelon</option>
</select>
<span>Selected：{{ fruit }}</span>
When the selected option has a value attribute, it is the value value of the corresponding option; otherwise it is the text value of the corresponding options.
Select Multiple Select Example:
<select v-model="fruit" multiple>
<option selected value="apple">apple</option>
<option value="banana">banana</option>
<option value="watermelon">watermelon</option>
</select>
<span>Selected：{{ fruit | json }}</span>
For multiple-select selects, the selected value will be placed in an array. Of course, most of the cases of dynamic select in our actual development, so the next step will be to analyze the instance of dynamic select.
Dynamic select
We can dynamically generate option through the v-for and v-bind instructions, as shown below:
<template>
<div >
<select v-model="fruit" >
<option v-for="option in options" v-bind:value="">
{{}}
</option>
</select>
<span>Selected：{{ fruit | json }}</span>
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
fruit: 'apple',
options: [
{ text: 'apple', value: 'apple' },
{ text: 'banana', value: 'banana' },
{ text: 'watermelon', value: 'watermelon' }
]
}
});
</script>
The generated code structure is as follows:
<select> <option value="apple">apple</option> <option value="banana">banana</option> <option value="watermelon">watermelon</option> </select>
Here we have summarized the basic knowledge and started to get some real information. I encountered two problems when writing cascading select. One problem is how to solve the problem of querying the data associated with select after the first select is selected; the other problem is how to select the cascading select data by default when I modify the data, which is displayed on the page. These two questions are mainly the second problem that bother me a little.
The solution to the first problem is to listen to the data in the first select, and the data changes again and initiate a request to obtain the second associated select. Examples are as follows:
<template>
<div class="box-select-first">
<select ="resCity">
<option v-for="sc in scLists" v-bind:value="">{{}}</option>
</select>
</div>
<div class="box-select-second">
<select v-model="resArea">
<option v-for="sa in saLists" v-bind:value="">{{}}</option>
</select>
</div>
</template>
<script>
export default {
data: function () {
return {
resCity: null,
resArea: null
}
},
created: function() {
let vm = this;
(); //Get the city drop-down list },
watch: {
resCity: 'getSecondSelectLists' //Get the drop-down list of the corresponding jurisdiction of the city },
methods: {
getSelectLists: function() {},
getSecondSelectLists: function(){}
}
}
</script>
The solution to the second problem is that I am called after the instance has been created. I first get the city drop-down list and then get the edit details data, and then delay binding the value of the associated jurisdiction list. In fact, I am in order to get the data loading of the jurisdiction list after listening for changes in the city during the life cycle, so that I can bind the drop-down list that displays the jurisdiction.
<template>
<div class="box-select-first">
<select ="resCity">
<option v-for="sc in scLists" v-bind:value="">{{}}</option>
</select>
</div>
<div class="box-select-second">
<select v-model="resArea">
<option v-for="sa in saLists" v-bind:value="">{{}}</option>
</select>
</div>
</template>
<script>
export default {
data: function () {
return {
resCity: null,
resArea: null
}
},
created: function() {
let vm = this;
(); //After the instance has been created, get the city drop-down list },
watch: {
resCity: 'getSecondSelectLists' // Listen to the city value changes and get the drop-down list of the corresponding jurisdiction of the city },
methods: {
getSelectLists: function() {
let vm = this;
if(vm.$ == 'modif') { //Judge the editing page to obtain editing details data (vm.$);
}
},
getSecondSelectLists: function(){},
getDetails:function(){
setTimeout(function() {
= ; //Delay binding of the drop-down option for the jurisdiction, load the drop-down data first in order to load the jurisdiction drop-down data first in order to load the }, 300);
}
}
}
</script>
Summarize:
In the life cycle of 2.0, select's cascading pull-down data binding requires loading of data before the value can be bound. Otherwise, the cascading pull-down value cannot be successfully bound.
References:
Official website
The above is an example of the select cascading drop-down box in 2.0 introduced by the editor to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!