浅谈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控制iframe滚动的代码
Apr 10 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
简单理解vue中Props属性
Oct 27 Javascript
清除输入框内的空格
Dec 21 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
PHP实现简易blog的制作
2016/10/24 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python3.8中使用f-strings调试
2019/05/22 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
工商管理专业自荐信
2014/06/03 职场文书
药剂专业求职信
2014/06/20 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
初中班长竞选稿
2015/11/20 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS