浅谈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变量作用域及可访问性的探讨
Nov 23 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
Vue常用指令详解分析
Aug 19 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
js实现继承的5种方式
2015/12/01 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python中itertools模块用法详解
2014/09/25 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
python验证码图片处理(二值化)
2019/11/01 Python
Django 请求Request的具体使用方法
2019/11/11 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
python实现FTP循环上传文件
2020/03/20 Python
python 如何引入协程和原理分析
2020/11/30 Python
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
前台接待员岗位职责
2014/01/02 职场文书
大学生学习自我评价
2014/01/13 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
优秀班集体申报材料
2014/12/25 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫