淺談vue 多個(gè)變量同時(shí)賦相同值互相影響
首先，該項(xiàng)目用到了element-ui中的Tabs 標(biāo)簽；然后來龍去脈是醬紫的：
一個(gè)項(xiàng)目中需動(dòng)態(tài)渲染一個(gè)列表billItemLIsts，列表中包含ｎ組小列表，其中小列表的state_pj用于改變?cè)撔×斜碇械膔adio，于是：
<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">計(jì)費(fèi)</el-radio>
<el-radio :label="chargeNo">不計(jì)費(fèi)</el-radio>
</el-radio-group>
</div>
</li>
</ul>
</el-tab-pane>
</el-tabs>
那么現(xiàn)在列表效果達(dá)到了，然鵝這個(gè)tab得放到dialog中，且存在取消與確定操作，確定時(shí)不用多說，取消時(shí)改變了的radio是不會(huì)自己變成我們想要的樣子，于是乎：
//最終的收費(fèi)設(shè)置數(shù)據(jù) billItemLIsts: [], //最終原始的收費(fèi)設(shè)置數(shù)據(jù) billItemLIstsOriginal: [],
沒錯(cuò)現(xiàn)在billItemLIsts就可以隨之怎么操作,因?yàn)槲覀冇衎illItemLIstsOriginal記住了他最初的樣子;
接下來就是付諸實(shí)際了:
// 取消修改收費(fèi)設(shè)置
cancleChargeSet() {
this.billItemLIsts = this.billItemLIstsOriginal;
if(!this.chargeOpenIs){
this.chargingFunIs = 1;
}
},
然并卵…
百思不得其解,他并沒有發(fā)揮自己的作用
這是因?yàn)樵贠bject賦值的時(shí)候，傳遞的不是值，而是引用，他們指向了同一個(gè)空間！
搞清楚了原因就好下手啦
解決：
1.this.billItemLIsts = JSON.parse( JSON.stringify(this.billItemLIstsOriginal) );
2.或使用 ES6 的解析語(yǔ)法 this.billItemLIsts = { ...this.billItemLIstsOriginal }
補(bǔ)充知識(shí)：VUE(ES6) 導(dǎo)出變量、常量，方法
在lib.js文件中， 使用 export{接口} 導(dǎo)出接口， 大括號(hào)中的接口名字為上面定義的變量， import和export是對(duì)應(yīng)的；
//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 多個(gè)變量同時(shí)賦相同值互相影響就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-admin-template框架搭建及應(yīng)用小結(jié)
?vue-admin-template是基于vue-element-admin的一套后臺(tái)管理系統(tǒng)基礎(chǔ)模板（最少精簡(jiǎn)版），可作為模板進(jìn)行二次開發(fā)，這篇文章主要介紹了vue-admin-template框架搭建及應(yīng)用,需要的朋友可以參考下2023-05-05
Vue3中數(shù)據(jù)響應(yīng)式原理與高效數(shù)據(jù)操作全解析
這篇文章主要為大家詳細(xì)介紹了Vue3中數(shù)據(jù)響應(yīng)式原理與高效數(shù)據(jù)操作的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
本文主要介紹了react里組件通信的幾種方式小結(jié),包含了5種方式,主要是props傳遞,回調(diào)函數(shù)作為props,Context,Redux或MobX,refs,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
vue store之狀態(tài)管理模式的詳細(xì)介紹
這篇文章主要介紹了vue store之狀態(tài)管理模式的詳細(xì)介紹，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue使用localStorage保存登錄信息 適用于移動(dòng)端、PC端
這篇文章主要為大家詳細(xì)介紹了vue使用localStorage保存登錄信息 適用于移動(dòng)端、PC端，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
Driver.js是一個(gè)功能強(qiáng)大且高度可定制的基于原生JavaScript開發(fā)的新用戶引導(dǎo)庫(kù)，本文主要介紹了Vue使用driver.js做引導(dǎo)頁(yè)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Vue3中Vuex狀態(tài)管理學(xué)習(xí)實(shí)戰(zhàn)示例詳解
這篇文章主要為大家介紹了Vue3中Vuex狀態(tài)管理學(xué)習(xí)實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
async和await作為異步函數(shù),語(yǔ)法很簡(jiǎn)單,就是在函數(shù)前面加上async 關(guān)鍵字,來表示它是異步的,下面這篇文章主要給大家介紹了如何通過一文教會(huì)你vue中使用async和await的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue的hash值原理也是table切換,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
基于Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson的方法
本文通過實(shí)例代碼給大家介紹基于Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson的方法，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-09-09