淺談vue 多個變數同時賦相同值互相影響
阿新 • • 發佈:2020-08-06
首先,該專案用到了element-ui中的Tabs 標籤;然後來龍去脈是醬紫的:
一個專案中需動態渲染一個列表billItemLIsts,列表中包含n組小列表,其中小列表的state_pj用於改變該小列表中的radio,於是:
<el-tabs tab-position="left" style="max-height:280px;"> <el-tab-pane v-for="(itema,index) in billItemLIsts" :key="itema.id" :label="itema.title" :value="itema.id"> <ul class="bill_set_ul"> <li v-for="(subitem,subindex) in itema.item" :key="subitem.id" :label="subitem.title" :value="subitem.id"> <div class="el-form-item__label">{{subitem.title}}:</div> <div class="el-form-item__content" style="width:200px;margin-left: 100px;"> <el-radio-group v-model="subitem.state_pj" @change="changeSub(index,subindex)"> <el-radio :label="chargeIs">計費</el-radio> <el-radio :label="chargeNo">不計費</el-radio> </el-radio-group> </div> </li> </ul> </el-tab-pane> </el-tabs>
那麼現在列表效果達到了,然鵝這個tab得放到dialog中,且存在取消與確定操作,確定時不用多說,取消時改變了的radio是不會自己變成我們想要的樣子,於是乎:
//最終的收費設定資料 billItemLIsts: [],//最終原始的收費設定資料 billItemLIstsOriginal: [],
沒錯現在billItemLIsts就可以隨之怎麼操作,因為我們有billItemLIstsOriginal記住了他最初的樣子;
接下來就是付諸實際了:
// 取消修改收費設定 cancleChargeSet() { this.billItemLIsts = this.billItemLIstsOriginal; if(!this.chargeOpenIs){ this.chargingFunIs = 1; } },
然並卵…
百思不得其解,他並沒有發揮自己的作用
這是因為在Object賦值的時候,傳遞的不是值,而是引用,他們指向了同一個空間!
搞清楚了原因就好下手啦
解決:
1.this.billItemLIsts = JSON.parse( JSON.stringify(this.billItemLIstsOriginal) );
2.或使用 ES6 的解析語法 this.billItemLIsts = { ...this.billItemLIstsOriginal }
補充知識:VUE(ES6) 匯出變數、常量,方法
在lib.js檔案中, 使用 export{介面} 匯出介面, 大括號中的介面名字為上面定義的變數, import和export是對應的;
//lib.js 檔案 let bar = "stringBar"; let foo = "stringFoo"; let fn0 = function() { console.log("fn0"); }; let fn1 = function() { console.log("fn1"); }; export{ bar,foo,fn0,fn1} //main.js檔案 import {bar,fn1} from "./lib"; console.log(bar+"_"+foo); fn0(); fn1();
以上這篇淺談vue 多個變數同時賦相同值互相影響就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。