vue 避免變量賦值后雙向綁定的操作
如： this.list = this.list2, 結(jié)果在list改變后 list2也改變，這不是我們想要的效果
第一種：
利用 JSON.parse 和 JSON.stringify
this.list= JSON.parse( JSON.stringify(this.list2) )
第二種：
ES6 的解析語法
this.list= { ...this.list2}
this.arr= [...this.arr2]
補(bǔ)充知識：解決vue中v-model綁定的變量賦值給了另一個變量后，兩個變量同時改變
先來看一下問題背景
我們要做一個 搜索+分頁 的功能，使用vue
我們將分頁控件綁定了點(diǎn)擊事件，點(diǎn)擊后提交v-model綁定的formData表單，但是我們忽略了一個問題，就是當(dāng)輸入的信息改變的情況下，不點(diǎn)擊搜索，直接點(diǎn)擊分頁控件，提交的將會是新現(xiàn)在搜索框中的搜索條件。這樣就不和邏輯了。
于是我們在data中新加了一個表單的對象 submitForm，只有在點(diǎn)擊 查詢 的時候，v-model綁定的 formData 表單才會賦值給這個對象，而翻頁的時候提交的是 submitForm 。這樣就解決了這個問題。
data() {
return {
formData: {
timeStart: '',
timeEnd: '',
// 分頁數(shù)據(jù)
pageNo: 1,
pageSize: 10
},
submitForm: {
timeStart: '',
timeEnd: '',
// 分頁數(shù)據(jù)
pageNo: 1,
pageSize: 10
},
}
this.submitForm = this.formData
// 用 new也是一樣達(dá)不到效果
this.submitForm = new Object(this.formData)
但是?。?！
submitForm 竟然跟著變了
這是因?yàn)樵贠bject賦值的時候，傳遞的不是值，而是引用，他們指向了同一個空間！
解決
第一種：利用 JSON.parse 和 JSON.stringify
this.submitForm = JSON.parse( JSON.stringify(this.formData) )
第二種：ES6 的解析語法
this.submitForm = { ...this.formData }
以上這篇vue 避免變量賦值后雙向綁定的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue如何配置根目錄@(引用路徑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中父子組件相互傳值的實(shí)現(xiàn)方法詳解
父子組件通信是Vue中常見的場景,這篇文章主要為大家詳細(xì)介紹了vue中父子組件相互傳值的實(shí)現(xiàn)方法,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2023-12-12
Vue實(shí)現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)一種簡單的無限循環(huán)滾動動畫的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
本文主要介紹了Vue3中key的作用和工作原理，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue項(xiàng)目調(diào)試的三種方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue項(xiàng)目調(diào)試的三種方法,大家可以根據(jù)需要選擇調(diào)試方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue更新數(shù)據(jù)卻不渲染頁面的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解在vue-cli3.0中自定css、js和圖片的打包路徑
這篇文章主要介紹了詳解在vue-cli3.0中自定css、js和圖片的打包路徑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue3數(shù)據(jù)更新,頁面沒有同步更新的問題及解決
這篇文章主要介紹了Vue3數(shù)據(jù)更新,頁面沒有同步更新的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue?iview?導(dǎo)航高亮動態(tài)設(shè)置方式
這篇文章主要介紹了vue?iview?導(dǎo)航高亮動態(tài)設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue項(xiàng)目優(yōu)化之通過keep-alive數(shù)據(jù)緩存的方法
本篇文章主要介紹了vue項(xiàng)目優(yōu)化之通過keep-alive數(shù)據(jù)緩存的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12