Vue select 綁定動態變量

概述

• 根據後臺的數據生成多個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) }); }