浅谈vue 多个变量同时赋相同值互相影响


Posted in Javascript onAugust 05, 2020

首先,该项目用到了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,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

以上这篇浅谈vue 多个变量同时赋相同值互相影响就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
了解javascript中的Dom操作
May 27 Javascript
JS array数组检测方式解析
May 19 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 #Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 #Javascript
vue 限制input只能输入正数的操作
Aug 05 #Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 #Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 #Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 #Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 #Javascript
You might like
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python实现俄罗斯方块
2018/06/26 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
自我鉴定书面格式
2014/01/13 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
财务会计自荐信范文
2014/02/21 职场文书
新春联欢会主持词
2014/03/24 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
计划生育汇报材料
2014/12/26 职场文书