概述

根據後臺的資料生成多個select，由於資料的數量不定，所以v-model繫結的變數名也不定。所以通過資料的id或者下標進行變數拼接。頁面能夠成功渲染，但是當進行下拉框的選值時，元件不重新整理，選中的結果並沒有展示

Code

<div v-for="(item,index) in tagAllDate" :key="index">
    <el-form-item :label="item.name">
     <el-select v-model="editData['line_' + index]" multiple placeholder="請選擇" style="width: 100%;">
      <el-option v-for="(itemO,o) in item.sub_list" :key="o" :label="itemO.name" :value="itemO.tag_id"></el-option>
     </el-select>
    </el-form-item>
   </div>

editdata是宣告的物件

editData:{},

由於我們需要進行變數的動態拼接，所以不能使用“物件.屬性”這種語法，使用中括號[]可以方便我們進行屬性名的動態拼接。因為屬性名並不能提前知道，所以editData中不能提前宣告變數。而這就是問題的關鍵所在。

問題

由於v-model繫結的值沒有宣告，所以元件渲染後，當進行下拉選擇時，選項的值並沒有顯示在元件中。但是輸出結果時，值已經被選中了。也就是說，能夠選到值，但頁面上元件無響應。

如果假定我們拼接的id為[1,2,3] ，所以變數名為line_1,line_2,line_3 。在editData中依次宣告這些變數後，元件顯示正常。

結論

el-select元件需要繫結明確的變數，如果變數沒有提前宣告，則元件選擇時介面將會無響應。

解決方案

tagAll() {
    this.loading = true;
    tagAll().then(response => {
     if(response.ret == 0) {
      response.data.forEach( (item,index)=>{
        this.$set(this.editData,"line_" + index,[])
      });
      this.tagAllDate = response.data;
     } else {
      this.$message.error(response.res_info);
     }
     this.loading = false
    })
   },

按照官方說明，在初始化的時候，會生成屬性的getter、setter。通過setter函式的呼叫，從而觸發元件更新。而直接賦值，並沒有setter函式的觸發。

另一個問題，

editData是動態的，裡面的 line_ 也是動態的，如何去獲取這些資訊呢

物件是editDate。但是裡面的line_0 是動態建立的，就是說，editDate裡面有多少的資料不知道，可能是：line_0 line_1 line_2 然後這些每一個都是陣列，現在要拿到這些所有的數組裡面的資料。

做法

首先迴圈這個物件拿到所有的Key的值，就是 line_0 line_1 這些key

for(var a in this.editData){
 console.log(a);
}

拿到key之後便可以直接根據動態的key拿到陣列迴圈拿相應的值

for(var a in this.editData){
     this.editData[a].forEach( (item,index) => {
      console.log(item)
     });
    }

補充知識：vue-element-admin使用常見問題

一、vue-element-admin新增快捷導航

這個元件是基於vue-i18n因此，首先在專案中安裝i18n

npm install --save vue-i18n

然後main.js中引入

import i18n from './lang' // Internationalization

然後注意src下邊lang資料夾的引入。之後在layout資料夾中，新增元件：tags-view 就可以了。

二、去掉Mock使用真實資料。

main.js中找到，mock的引入直接註釋掉，就好了。所有的介面請求都在 api 下邊

以上這篇Vue select 繫結動態變數的例項講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。