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高级程序设计 事件学习笔记
Sep 10 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
js省市区级联查询(插件版&无插件版)
Mar 21 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 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
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python psutil模块简单使用实例
2015/04/28 Python
Python六大开源框架对比
2015/10/19 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
django解决订单并发问题【推荐】
2019/07/31 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
wxpython绘制音频效果
2019/11/18 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
python如何写try语句
2020/07/14 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
企业安全生产演讲稿
2014/05/09 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
社区干部培训心得体会
2016/01/06 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server
vue中data里面的数据相互使用方式
2022/06/05 Vue.js