vue data變量相互賦值后被實(shí)時(shí)同步的解決步驟
數(shù)據(jù)結(jié)構(gòu)是這樣子的
data() { return { title: 'web前端 this data變量相互賦值后被實(shí)時(shí)同步問題', val_1: 'vue', val_2: '' } }
問題源:
我們在onload()把val_1 賦給 val_2 (或者在用戶click時(shí)更改也都會出現(xiàn)這個(gè)問題)
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)); }
補(bǔ)充知識:vue定義的全局變量在一個(gè)方法賦值過后在另一個(gè)方法中是空
在學(xué)習(xí)vue的過程中,發(fā)現(xiàn)了許多小的問題,例如:我定義一個(gè)全局變量a,為了可以在下面定義的方法中一直取得到這個(gè)全局變量,在方法中我添加了一個(gè)jquery的click方法,在這個(gè)方法里面用this.a = b(自定義的一個(gè)變量);然后到另一個(gè)方法中去使用這個(gè)全局變量a,發(fā)現(xiàn)根本沒有進(jìn)行賦值,還是原來的全局變量的值。
原因如下:因?yàn)閏lick函數(shù)使this的指向發(fā)生了變化。所以要在click函數(shù)的外面添加一句:
var self = this;
然后在click函數(shù)里面為全局變量賦值要寫:
self.a = b;
這樣就不會改變this的指向了!
以上這篇vue data變量相互賦值后被實(shí)時(shí)同步的解決步驟就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決
這篇文章主要介紹了在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01在vue項(xiàng)目中引入highcharts圖表的方法(詳解)
下面小編就為大家分享一篇在vue項(xiàng)目中引入highcharts圖表的方法(詳解),具有很好的參考價(jià)值,希望對大家有所幫助2018-03-03vue結(jié)合g6實(shí)現(xiàn)樹級結(jié)構(gòu)(compactBox?緊湊樹)
本文主要介紹了vue結(jié)合g6實(shí)現(xiàn)樹級結(jié)構(gòu),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06深入解析Vue中的this.$forceUpdate()的使用
this.$forceUpdate()?是一個(gè)重要的實(shí)例方法,本文主要介紹了深入解析Vue中的this.$forceUpdate()的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-07-07vue-cli5搭建vue項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了vue-cli5搭建vue項(xiàng)目的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05vue使用@scroll監(jiān)聽滾動事件時(shí),@scroll無效問題的解決方法詳解
這篇文章主要介紹了vue使用@scroll監(jiān)聽滾動事件時(shí),@scroll無效問題的解決方法,結(jié)合實(shí)例形式分析了@scroll監(jiān)聽滾動事件無效問題的原因及相應(yīng)的解決方法,需要的朋友可以參考下2019-10-10