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 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
uni-app如何实现增量更新功能
Jan 03 Javascript
js实现点击生成随机div
Jan 16 Javascript
Vue和React有哪些区别
Sep 12 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
php抓取网站图片并保存的实现方法
2015/10/29 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
javascript自然分类法算法实现代码
2013/10/11 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
js实现随机点名程序
2020/09/17 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
Python对数据库操作
2016/03/28 Python
Python语言描述最大连续子序列和
2017/12/05 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Django 用户认证组件使用详解
2019/07/23 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
物业经理自我鉴定
2014/03/03 职场文书
幼儿园安全责任书
2014/04/14 职场文书
体育教师求职信
2014/05/24 职场文书
企业管理标语
2014/06/10 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
赢在中国观后感
2015/06/02 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript