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]
補充知識：解決vue中v-model綁定的變量賦值給了另一個變量后，兩個變量同時改變
先來看一下問題背景
我們要做一個 搜索+分頁 的功能，使用vue
我們將分頁控件綁定了點擊事件，點擊后提交v-model綁定的formData表單，但是我們忽略了一個問題，就是當(dāng)輸入的信息改變的情況下，不點擊搜索，直接點擊分頁控件，提交的將會是新現(xiàn)在搜索框中的搜索條件。這樣就不和邏輯了。
于是我們在data中新加了一個表單的對象 submitForm，只有在點擊 查詢 的時候，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 竟然跟著變了
這是因為在Object賦值的時候，傳遞的不是值，而是引用，他們指向了同一個空間！
解決
第一種：利用 JSON.parse 和 JSON.stringify
this.submitForm = JSON.parse( JSON.stringify(this.formData) )
第二種：ES6 的解析語法
this.submitForm = { ...this.formData }
以上這篇vue 避免變量賦值后雙向綁定的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue slots 組件的組合/分發(fā)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue select 綁定動態(tài)變量的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了Vue.js標(biāo)簽頁組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一2019-10-10
本文主要介紹了vue實現(xiàn)接口封裝的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
使用Vue指令實現(xiàn)Markdown渲染和代碼高亮
在前端開發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁面上,同時還希望能夠?qū)Υa塊進(jìn)行高亮顯示,今天我將分享一段代碼,通過Vue指令實現(xiàn)了這個功能,需要的朋友可以參考下2023-09-09
基于vue3+TypeScript實現(xiàn)一個簡易的Calendar組件
最近在學(xué)習(xí) react,在學(xué)習(xí)到使用 react 開發(fā) Calendar 組件的時候,突然聯(lián)想到使用 vue 進(jìn)行 Calendar 功能的實現(xiàn),因為目前使用的技術(shù)棧是 vue,剛好可以加深下對 vue3 和 ts 的使用印象,所以本文給大家介紹了基于vue3+TypeScript實現(xiàn)一個簡易的Calendar組件2024-05-05
Vue3中toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，本文主要來給大家講解一下Vue3中的toRef和toRefs的使用，感興趣的朋友跟隨小編一起看看吧2023-01-01
Vue+elementUI實現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）
這篇文章主要介紹了Vue+elementUI實現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue3的setup的使用和原理,結(jié)合實例形式詳細(xì)分析了vue3 setup的基本功能、原理與使用方法,需要的朋友可以參考下2023-06-06
Vue2.0基于vue-cli+webpack同級組件之間的通信教程(推薦)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack同級組件之間的通信教程(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09