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