vue data變量相互賦值后被實時同步的解決步驟
更新時間：2020年08月05日 09:33:06 作者：岑農(nóng)耕 - 深圳
這篇文章主要介紹了vue data變量相互賦值后被實時同步的解決步驟，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
數(shù)據(jù)結(jié)構(gòu)是這樣子的
data() {
return {
title: 'web前端 this data變量相互賦值后被實時同步問題',
val_1: 'vue',
val_2: ''
}
}
問題源：
我們在onload()把val_1 賦給 val_2 (或者在用戶click時更改也都會出現(xiàn)這個問題)
onload() {
this.val_2 = this.val_1;
}
解決方法：
我們在通過JavaScript把 “val_1” 轉(zhuǎn)換成字符串類型，再JSON.parse，最后再賦給 “val_2” 就解決了
onload() {
this.val_2 = JSON.parse(JSON.stringify(this.val_1));
}
補充知識：vue定義的全局變量在一個方法賦值過后在另一個方法中是空
在學習vue的過程中，發(fā)現(xiàn)了許多小的問題，例如：我定義一個全局變量a，為了可以在下面定義的方法中一直取得到這個全局變量，在方法中我添加了一個jquery的click方法，在這個方法里面用this.a = b(自定義的一個變量)；然后到另一個方法中去使用這個全局變量a，發(fā)現(xiàn)根本沒有進行賦值，還是原來的全局變量的值。
原因如下：因為click函數(shù)使this的指向發(fā)生了變化。所以要在click函數(shù)的外面添加一句：
var self = this;
然后在click函數(shù)里面為全局變量賦值要寫：
self.a = b;
這樣就不會改變this的指向了！
以上這篇vue data變量相互賦值后被實時同步的解決步驟就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在使用vuex的時候出現(xiàn)commit未定義錯誤的解決
這篇文章主要介紹了在使用vuex的時候出現(xiàn)commit未定義錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
下面小編就為大家分享一篇在vue項目中引入highcharts圖表的方法(詳解)，具有很好的參考價值，希望對大家有所幫助2018-03-03
vue結(jié)合g6實現(xiàn)樹級結(jié)構(gòu)(compactBox?緊湊樹)
本文主要介紹了vue結(jié)合g6實現(xiàn)樹級結(jié)構(gòu)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
深入解析Vue中的this.$forceUpdate()的使用
this.$forceUpdate()?是一個重要的實例方法,本文主要介紹了深入解析Vue中的this.$forceUpdate()的使用,具有一定的參考價值,感興趣的可以了解一下2024-07-07
el-select即選擇器用于從若干個候選項中選擇其中一個(或者多個),在傳統(tǒng)網(wǎng)頁開發(fā)中選擇器經(jīng)常被稱作下拉框、下拉列表是最常用的表單元素之一,這篇文章主要給大家介紹了關(guān)于element?el-select下拉框選擇失效解決辦法,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)掃碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
本文主要介紹了vue-cli5搭建vue項目的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
V部落是一個多用戶博客管理平臺。這篇文章主要介紹了Vue+SpringBoot開發(fā)V部落博客管理平臺,需要的朋友可以參考下2017-12-12
學習 Vue 的時候覺得樣式綁定很簡單，但是使用的時候總是容易搞暈自己。這篇文章主要介紹了Vue 樣式綁定的實現(xiàn)方法，感興趣的小伙伴們可以參考一下2019-01-01
vue使用@scroll監(jiān)聽滾動事件時，@scroll無效問題的解決方法詳解
這篇文章主要介紹了vue使用@scroll監(jiān)聽滾動事件時，@scroll無效問題的解決方法,結(jié)合實例形式分析了@scroll監(jiān)聽滾動事件無效問題的原因及相應的解決方法,需要的朋友可以參考下2019-10-10