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