vue data变量相互赋值后被实时同步的解决步骤
更新时间：2020年08月05日 09:33:06 作者：岑农耕 - 深圳
这篇文章主要介绍了vue data变量相互赋值后被实时同步的解决步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
数据结构是这样子的
data() {
return {
title: 'web前端 this data变量相互赋值后被实时同步问题',
val_1: 'vue',
val_2: ''
}
}
问题源：
我们在onload()把val_1 赋给 val_2 (或者在用户click时更改也都会出现这个问题)
onload() {
this.val_2 = this.val_1;
}
解决方法：
我们在通过JavaScript把 “val_1” 转换成字符串类型，再JSON.parse，最后再赋给 “val_2” 就解决了
onload() {
this.val_2 = JSON.parse(JSON.stringify(this.val_1));
}
补充知识：vue定义的全局变量在一个方法赋值过后在另一个方法中是空
在学习vue的过程中，发现了许多小的问题，例如：我定义一个全局变量a，为了可以在下面定义的方法中一直取得到这个全局变量，在方法中我添加了一个jquery的click方法，在这个方法里面用this.a = b(自定义的一个变量)；然后到另一个方法中去使用这个全局变量a，发现根本没有进行赋值，还是原来的全局变量的值。
原因如下：因为click函数使this的指向发生了变化。所以要在click函数的外面添加一句：
var self = this;
然后在click函数里面为全局变量赋值要写：
self.a = b;
这样就不会改变this的指向了！
以上这篇vue data变量相互赋值后被实时同步的解决步骤就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了在使用vuex的时候出现commit未定义错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
下面小编就为大家分享一篇在vue项目中引入highcharts图表的方法(详解)，具有很好的参考价值，希望对大家有所帮助2018-03-03
本文主要介绍了vue结合g6实现树级结构，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
深入解析Vue中的this.$forceUpdate()的使用
this.$forceUpdate() 是一个重要的实例方法,本文主要介绍了深入解析Vue中的this.$forceUpdate()的使用,具有一定的参考价值,感兴趣的可以了解一下2024-07-07
el-select即选择器用于从若干个候选项中选择其中一个(或者多个),在传统网页开发中选择器经常被称作下拉框、下拉列表是最常用的表单元素之一,这篇文章主要给大家介绍了关于element el-select下拉框选择失效解决办法,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了vue实现扫码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
本文主要介绍了vue-cli5搭建vue项目的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
V部落是一个多用户博客管理平台。这篇文章主要介绍了Vue+SpringBoot开发V部落博客管理平台,需要的朋友可以参考下2017-12-12
学习 Vue 的时候觉得样式绑定很简单，但是使用的时候总是容易搞晕自己。这篇文章主要介绍了Vue 样式绑定的实现方法，感兴趣的小伙伴们可以参考一下2019-01-01
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
这篇文章主要介绍了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法,结合实例形式分析了@scroll监听滚动事件无效问题的原因及相应的解决方法,需要的朋友可以参考下2019-10-10
最新评论