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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
CSDN轮换广告图片轮换效果
Mar 27 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
javascript this详细介绍
2016/09/19 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
南京市纪委监察局整改方案
2014/09/16 职场文书
财务部岗位职责范本
2015/04/14 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技