select_ Render small phenomena

Requirements describe

• select The data in the drop-down list is returned through the back-end interface ;
• Because of the large amount of data , So pull away 500 Data ( Incomplete quantity ), The rest of the data is obtained through fuzzy search ;
• When the drop-down box closes – Empty keywords , Get the drop-down list again ;

problem

• Get through fuzzy search 500 Data other than — choice ;
• When the drop-down box closes , Get the list again , The list does not contain the selected data , However, the selected element text can still be displayed instead of id;

Through the following cases

The drop-down box selects personnel by default 1, When you click change Button , The drop-down list will change ( The selected value remains unchanged );

key The value is element value

• <template>
    <div style="margin-top:20px">
      <el-select v-model="value" placeholder=" Please select ">
      <el-option
        v-for="item in dataList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-button @click='listChenge' size='mini'>change</el-button>
    </div>
  </template>
  
  <script>
  export default {
        
    data(){
        
      return{
        
        listObj:{
        
          1:[
            {
        label:' personnel 1', value:111},
            {
        label:' personnel 2', value:222},
            {
        label:' personnel 3', value:333}
          ],
          2:[
            {
        label:' personnel 4', value:444},
            {
        label:' personnel 5', value:555},
            {
        label:' personnel 6', value:666}
          ],
          3:[
            {
        label:' personnel 7', value:777},
            {
        label:' personnel 8', value:888},
            {
        label:' personnel 9', value:999}
          ],
        },
        index:1,
        dataList:[],
        value:111
      }
    },
    created(){
        
      this.listChenge()
    },
    methods:{
        
      listChenge(){
        
        this.index = this.index<=3 ? this.index : 1
        this.dataList = this.listObj[this.index]
        this.index++
      }
    }
  }
  </script>
  
  

• The process

  • [1] By default, select the candidate 1 , The drop-down list is listObj The first element list of ;

    • 

  • [2] Click on change Button , The drop-down list changes , however The selected value can still be echoed normally

    • 

key The value is index

• <template>
    <div style="margin-top:20px">
      <el-select v-model="value" placeholder=" Please select ">
      <el-option v-for="(item,index) in dataList" :key="index" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-button @click='listChenge' size='mini'>change</el-button>
    </div>
  </template>
  

• The process

  • [1] By default, select the candidate 1 , The drop-down list is listObj The first element list of ;

    • 

  • [2] Click on change Button , The drop-down list changes , however The selected value cannot echo normally , Echo value is value Instead of label

    • 

reason

• When dom update ,key The value is value when
  • [1] Conduct path, adopt sameVnode Method will be judged as the same element ;
  • [2]pathVnode Compare oldVnode==vnode, Direct reuse ;
  • So no re rendering
• When dom update ,key The value is index when
  • Conduct path, because key The value is different ,sameVnode Methods will be judged as different elements , Direct replacement ;
  • Rendering reality dom updated