浅谈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 相关文章推荐
javascript第一课
Feb 27 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
js中常用的Math方法总结
Jan 12 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
基于Vue插入视频的2种方法小结
Apr 02 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
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
python存储16bit和32bit图像的实例
2018/12/05 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
pandas计数 value_counts()的使用
2019/06/24 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
parser.add_argument中的action使用
2020/04/20 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
英国电子专家:maplin
2019/09/04 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
最新党员思想汇报
2014/01/01 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
品质主管岗位职责
2014/03/16 职场文书
工作分析计划书
2014/04/30 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
云台山导游词
2015/02/03 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
干部培训简讯
2015/07/20 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python