Vue. select cascading drop down box instance in js 2.0

After searching for Vuejs 2.0 Dynamic Cascade select on the Internet for a long time, I decided to summarize my own experience about the application of select in Vue. js 2.0. First of all, I will talk about the technology I use under 1. I refer to the mature experience on the Internet and choose the whole family bucket with Vue. js 2.0 + Vue-router+Vuex.

select should first distinguish between single choice and multiple choice, and v-model has a difference between single choice and multiple choice in select.

select radio instance:

<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 value attribute, vm. selected is the value value corresponding to option; Otherwise, it is the text value corresponding to options.

select multiple selection instance:

<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 select with multiple selections, the selected value will be put into an array. Of course, in our actual development, most of them are dynamic select, so we will analyze the example of dynamic select next.

Dynamic select

We can dynamically generate option through v-for and v-bind instructions, as follows:

<template>
 <div id="app">
 <select v-model="fruit" >
 <option v-for="option in options" v-bind:value="option.value">
  {{option.text}}
 </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, after summing up the basic knowledge, we began to dry goods. I encountered two problems when writing cascade select. One problem is how to solve the problem of querying the data associated with select after the first select is selected; One problem is how to select cascaded select data by default when I modify the data and display it on the page. These two questions are mainly the second question, which puzzles me one point.

The solution to the first problem is to monitor the data in the selected first select, and then initiate a request to obtain the second associated select when the data changes. The example is as follows:

<template>
 <div class="box-select-first">
 <select v-model.lazy="resCity">
 <option v-for="sc in scLists" v-bind:value="sc.areacode">{{sc.cityname}}</option>
 </select>
 </div>
 <div class="box-select-second">
 <select v-model="resArea">
 <option v-for="sa in saLists" v-bind:value="sa.id">{{sa.areaname}}</option>
 </select>
 </div>
 
</template>
<script>
 export default {
 data: function () {
 return {
 resCity: null,
 resArea: null
 }
 },
 created: function() {
 let vm = this;
 vm.getSelectLists(); // 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 first after the instance has been created. After obtaining the city drop-down list successfully, we can obtain the data of editing details, and then delay binding the value of the associated jurisdiction list. In fact, it is to obtain the loading of the jurisdiction list data after monitoring the city change in the life cycle, so as to bind and display the jurisdiction drop-down list.

<template>
 <div class="box-select-first">
 <select v-model.lazy="resCity">
 <option v-for="sc in scLists" v-bind:value="sc.areacode">{{sc.cityname}}</option>
 </select>
 </div>
 <div class="box-select-second">
 <select v-model="resArea">
 <option v-for="sa in saLists" v-bind:value="sa.id">{{sa.areaname}}</option>
 </select>
 </div>
 
</template>
<script>
 export default {
 data: function () {
 return {
 resCity: null,
 resArea: null
 }
 },
 created: function() {
 let vm = this;
 vm.getSelectLists();  // Get the city drop-down list after the instance has been created 
 },
 watch: {
 resCity: 'getSecondSelectLists'  // Monitor the change of city value and get the drop-down list of the corresponding jurisdiction of the city 
 },
 methods: {
 getSelectLists: function() {
 let vm = this;
 if(vm.$route.name == 'modif') { // Judge the editing page to obtain editing detail data 
  vm.getDetails(vm.$route.params.id); 
 }
 },
 getSecondSelectLists: function(){},
 getDetails:function(){
 setTimeout(function() {
  vm.resArea = data.id; // Delay binding the drop-down option of the jurisdiction, and load the drop-down data for the jurisdiction first 
  }, 300);
 }
 }
 }
</script>

Summary:

In the lifecycle of Vue. js 2.0, the cascading drop-down data binding of select requires loading the data before binding the value. Otherwise, the cascading drop-down value cannot be successfully bound.

References:

vue.js official website