您好,登錄后才能下訂單哦!
本篇文章為大家展示了使用Vue select 如何綁定動態(tài)變量,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
概述
根據(jù)后臺的數(shù)據(jù)生成多個select,由于數(shù)據(jù)的數(shù)量不定,所以v-model綁定的變量名也不定。所以通過數(shù)據(jù)的id或者下標(biāo)進(jìn)行變量拼接。頁面能夠成功渲染,但是當(dāng)進(jìn)行下拉框的選值時,組件不刷新,選中的結(jié)果并沒有展示
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="請選擇" > <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:{},
由于我們需要進(jìn)行變量的動態(tài)拼接,所以不能使用“對象.屬性”這種語法,使用中括號[]可以方便我們進(jìn)行屬性名的動態(tài)拼接。因為屬性名并不能提前知道,所以editData中不能提前聲明變量。而這就是問題的關(guān)鍵所在。
問題
由于v-model綁定的值沒有聲明,所以組件渲染后,當(dāng)進(jìn)行下拉選擇時,選項的值并沒有顯示在組件中。但是輸出結(jié)果時,值已經(jīng)被選中了。也就是說,能夠選到值,但頁面上組件無響應(yīng)。
如果假定我們拼接的id為[1,2,3] ,所以變量名為line_1, line_2, line_3 。在editData中依次聲明這些變量后,組件顯示正常。
結(jié)論
el-select組件需要綁定明確的變量,如果變量沒有提前聲明,則組件選擇時界面將會無響應(yīng)。
解決方案
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函數(shù)的調(diào)用,從而觸發(fā)組件更新。而直接賦值,并沒有setter函數(shù)的觸發(fā)。
另一個問題,
editData是動態(tài)的,里面的 line_ 也是動態(tài)的,如何去獲取這些信息呢
對象是editDate。但是里面的line_0 是動態(tài)創(chuàng)建的,就是說,editDate里面有多少的數(shù)據(jù)不知道,可能是:line_0 line_1 line_2 然后這些每一個都是數(shù)組,現(xiàn)在要拿到這些所有的數(shù)組里面的數(shù)據(jù)。
做法
首先循環(huán)這個對象拿到所有的Key的值,就是 line_0 line_1 這些key
for(var a in this.editData){ console.log(a); }
拿到key之后便可以直接根據(jù)動態(tài)的key拿到數(shù)組循環(huán)拿相應(yīng)的值
for(var a in this.editData){ this.editData[a].forEach( (item, index) => { console.log(item) }); }
補(bǔ)充知識:vue-element-admin使用常見問題
一、vue-element-admin添加快捷導(dǎo)航
這個組件是基于vue-i18n因此,首先在項目中安裝i18n
npm install --save vue-i18n
然后main.js中引入
import i18n from './lang' // Internationalization
然后注意src下邊lang文件夾的引入。之后在layout文件夾中,添加組件:tags-view 就可以了。
二、去掉Mock使用真實數(shù)據(jù)。
main.js中找到,mock的引入直接注釋掉,就好了。所有的接口請求都在 api 下邊
上述內(nèi)容就是使用Vue select 如何綁定動態(tài)變量,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。