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 相关文章推荐
JavaScript 学习笔记(十一)
Jan 19 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
node.js实现登录注册页面
Apr 08 Javascript
Less 安装及基本用法
May 05 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 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
9个PHP开发常用功能函数小结
2011/07/15 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
php模拟post提交数据的方法
2015/02/12 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
js canvas实现橡皮擦效果
2018/12/20 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
python 实现二维列表转置
2019/12/02 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
幼儿园中班上学期评语
2014/04/18 职场文书
文明班集体申报材料
2014/05/23 职场文书
新教师培训方案
2014/06/08 职场文书
领导干部学习心得体会
2016/01/23 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书