vue如何動態(tài)給data中添加變量
vue動態(tài)給data中添加變量
我的業(yè)務(wù)是動態(tài)給v-model賦值 但是你得更改所以做不到一對一這時(shí)候你就得動態(tài)創(chuàng)建變量
首先你得知道你的數(shù)據(jù)結(jié)構(gòu)是什么樣的,然后你根據(jù)你數(shù)據(jù)的結(jié)構(gòu)用數(shù)組動態(tài)創(chuàng)建變量
然后用你創(chuàng)建的空數(shù)組一一對應(yīng)v-model賦值
- js:
for (var i =0;i< _this.particulars.itemList.length;i++) { _this.timeSet.push([]); for (var k = 0;k<_this.particulars.itemList[i].taskList.length;k++) { _this.timeSet[i].push({stopTime:'',measureText:''}); } }
- data:
timeSet : [];
- html:
<div class="module"> <div class="question-group" v-for="(item,index) in particulars.itemList" :key="index"> <p class="group-title">{{item.title}}</p> <div class="group-content" v-for="(list,idx) in item.taskList" :key="idx"> <div class="question"> <div class="question-type">整</div> <p class="question-title">{{list.clauseContent}}</p> <div class="question-sub"> <p class="title">憑證詳情</p> <textarea class="input-show" placeholder="請輸入措施內(nèi)容" v-model="timeSet[index][idx].measureText"></textarea> </div> <div class="question-options form-item-group"> <div class="module-wrapper half"> <!-- 時(shí)間選擇(帶標(biāo)題) --> <div class="form-item with-label"> <p class="label">任務(wù)結(jié)束時(shí)間<span class="required">*</span></p> <div class="module"> <flat-pickr :config="pickrConfig" placeholder="請選擇結(jié)束時(shí)間" v-model="timeSet[index][idx].stopTime"></flat-pickr> </div> </div> </div> </div> </div> </div> </div> </div>
vue給data中的變量動態(tài)添加后綴
比如在data中聲明的show1、show2、show3、show4,會有場景使用時(shí)是showX
需要用到一個(gè)變量去賦值1、2、3、4…
let index = 1/2/3/4 this[`show${index}`]
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue router錯(cuò)誤跳轉(zhuǎn)到首頁("/")的問題及解決
這篇文章主要介紹了Vue router錯(cuò)誤跳轉(zhuǎn)到首頁("/")的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue3+Element+Ts實(shí)現(xiàn)表單的基礎(chǔ)搜索重置等功能
本文主要介紹了Vue3+Element+Ts實(shí)現(xiàn)表單的基礎(chǔ)搜索重置等功能,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12Vue?ElementUI?table實(shí)現(xiàn)雙擊修改編輯某個(gè)內(nèi)容的方法
在實(shí)現(xiàn)表格單元格雙擊編輯功能時(shí),需使用@cell-dblclick事件來觸發(fā)雙擊操作,將單元格切換為input輸入框,通過ref引用和綁定失焦及回車事件來確認(rèn)編輯,同時(shí),需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善2024-09-09