vue 避免变量赋值后双向绑定的操作


Posted in Javascript onNovember 07, 2020

如: this.list = this.list2, 结果在list改变后 list2也改变,这不是我们想要的效果

第一种:

利用 JSON.parse 和 JSON.stringify

this.list= JSON.parse( JSON.stringify(this.list2) )

第二种:

ES6 的解析语法

this.list= { ...this.list2}

this.arr= [...this.arr2]

补充知识:解决vue中v-model绑定的变量赋值给了另一个变量后,两个变量同时改变

先来看一下问题背景

我们要做一个 搜索+分页 的功能,使用vue

我们将分页控件绑定了点击事件,点击后提交v-model绑定的formData表单,但是我们忽略了一个问题,就是当输入的信息改变的情况下,不点击搜索,直接点击分页控件,提交的将会是新现在搜索框中的搜索条件。这样就不和逻辑了。

于是我们在data中新加了一个表单的对象 submitForm,只有在点击 查询 的时候,v-model绑定的 formData 表单才会赋值给这个对象,而翻页的时候提交的是 submitForm 。这样就解决了这个问题。

data() {
  return {
  formData: {
   timeStart: '',
   timeEnd: '',
   // 分页数据
   pageNo: 1,
   pageSize: 10
  },
  submitForm: {
   timeStart: '',
   timeEnd: '',
   // 分页数据
   pageNo: 1,
   pageSize: 10
  },
 }

this.submitForm = this.formData
// 用 new也是一样达不到效果
this.submitForm = new Object(this.formData)

但是!!!

submitForm 竟然跟着变了

这是因为在Object赋值的时候,传递的不是值,而是引用,他们指向了同一个空间!

解决

第一种:利用 JSON.parse 和 JSON.stringify

this.submitForm = JSON.parse( JSON.stringify(this.formData) )

第二种:ES6 的解析语法

this.submitForm = { ...this.formData }

以上这篇vue 避免变量赋值后双向绑定的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Maps Javascript
Jan 22 Javascript
javascript 数组排序函数
Aug 20 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
js 通用订单代码
Dec 23 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 #Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 #Javascript
Nuxt 项目性能优化调研分析
Nov 07 #Javascript
js实现日历
Nov 07 #Javascript
工作中常用js功能汇总
Nov 07 #Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 #Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 #Javascript
You might like
SONY SRF-M100的电路分析
2021/03/02 无线电
php中数据的批量导入(csv文件)
2006/10/09 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
php实现用户登陆简单实例
2017/04/04 PHP
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
js实现随机抽奖
2020/03/19 Javascript
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python 自定义对象的打印方法
2019/01/12 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
整顿机关作风心得体会
2014/09/10 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL