Vue select 繫結動態變數

for="
(item, index) in tagalldate
" :key="
index
">
"item.name
">
select v-model="
editdata['line_' + index]
" multiple placeholder="
請選擇" style="
width: 100%;
">
for="
(itemo, o) in item.sub_list
" :key="
o" :label="
itemo.name
" :value="
itemo.tag_id
">
select>

editdata是宣告的物件

editdata:{},

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

問題

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

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

結論

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

tagall() );
this.tagalldate =response.data;
} else
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)

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

for(var a in
this
.editdata));
}

Vue select 繫結動態變數

靜態變數與動態變數

靜態變數與動態變數

靜態變數和動態變數

Vue select 繫結動態變數

靜態變數與動態變數

靜態變數與動態變數

靜態變數和動態變數

相關推薦