首先,該項目用到了element-ui中的Tabs 标簽;然後來龍去脈是醬紫的:
一個項目中需動态渲染一個清單billItemLIsts,清單中包含n組小清單,其中小清單的state_pj用于改變該小清單中的radio,于是:
-
{{subitem.title}}:
計費
不計費
那麼現在清單效果達到了,然鵝這個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,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();
以上這篇淺談vue 多個變量同時賦相同值互相影響就是小編分享給大家的全部内容了,希望能給大家一個參考,也希望大家多多支援腳本之家。