浅谈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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
微信小程序canvas实现签名功能
Jan 19 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获取当前url的具体方法全面解析
2013/11/26 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
Javascript注入技巧
2007/06/22 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Python如何生成树形图案
2018/01/03 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
应届大学生求职信
2013/12/01 职场文书
党员组织关系介绍信
2014/02/13 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
2016新年问候语大全
2015/11/11 职场文书
初一语文教学反思
2016/03/03 职场文书
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL