浅谈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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
jquery select选中的一个小问题
Oct 11 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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实现的漂亮分页方法
2014/04/17 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
原生js实现购物车
2020/09/23 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
深入解析Python中的urllib2模块
2015/11/13 Python
python中的字典使用分享
2016/07/31 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Python实现最大子序和的方法示例
2019/07/05 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
如何理解委托
2012/01/06 面试题
《三峡》教学反思
2014/03/01 职场文书
新书发布会策划方案
2014/06/09 职场文书
教师节学生演讲稿
2014/09/03 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
java基础——多线程
2021/07/03 Java/Android