讓Vue響應(yīng)Map或Set的變化操作
問題背景
我想在vuex的state中使用map，這樣可以使很多操作變得方便
const state = {
all: new Map()
}
這樣的寫法是沒有問題的，不會(huì)報(bào)錯(cuò)，state.all可以像正常的Map一樣使用。
但是這里有一個(gè)問題，vue的響應(yīng)式系統(tǒng)不支持Map和Set，也就是說，當(dāng)Map與Set里面的元素變化時(shí)Vue追蹤不到這些變化，因此無法做出響應(yīng)。這樣一來，頁面上依賴all的元素也不會(huì)隨all的變化而變化
解決方法
you need to create a serializable replica of this structure and expose it to Vue
data() {
mySetChangeTracker: 1,
mySet: new Set(),
},
computed: {
mySetAsList() {
var x = this.mySetChangeTracker;
// By using `mySetChangeTracker` we tell Vue that this property depends on it,
// so it gets re-evaluated whenever `mySetChangeTracker` changes
return Array.from(this.mySet);
},
},
methods: {
add(item) {
this.mySet.add(item);
// Trigger Vue updates
this.mySetChangeTracker += 1;
}
}
解決方法是用一個(gè)可序列化的mySetChangeTracker來手動(dòng)追蹤變化
Vue追蹤不到Set的變化，但是可以追蹤到mySetChangeTracker的變化，所以當(dāng)Set發(fā)生改變后，手動(dòng)改變mySetChangeTracker的值就能讓Vue知道我的數(shù)據(jù)發(fā)生了變化。
在mySetAsList里面寫入var x = this.mySetChangeTracker，這樣一來當(dāng)mySetChangeTracker更新后，mySetAsList就會(huì)做出響應(yīng)
補(bǔ)充知識(shí)：vue渲染時(shí)對象里面的對象的屬性提示undefined，但渲染成功
場景：
從后臺(tái)請求的數(shù)據(jù)結(jié)構(gòu)如下：
我的list是對象，而comment又是list里的對象，渲染成功了，卻報(bào)如下錯(cuò)：
解決辦法：
添加一個(gè)：v-if
以上這篇讓Vue響應(yīng)Map或Set的變化操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
玩轉(zhuǎn)vue的slot內(nèi)容分發(fā)
這篇文章主要介紹了玩轉(zhuǎn)vue的slot內(nèi)容分發(fā)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
在vue2中v-model使用的還是挺多的,不過這個(gè)指令一般是用在了輸入框中,并且這個(gè)指令其實(shí)就是個(gè)語法糖,下面這篇文章主要給大家介紹了關(guān)于vue3組件中v-model的使用以及深入講解的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法(兩種)
這篇文章主要介紹了Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法,本文通過實(shí)例代碼通過兩種方法給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
本篇文章主要介紹了vue 里面使用axios 和封裝的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)九宮格圖片展示模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
詳解使用element-ui table組件的篩選功能的一個(gè)小坑
在element ui 框架中，對于table框架，有一個(gè)篩選功能，這篇文章主要介紹了詳解使用element-ui table組件的篩選功能的一個(gè)小坑，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
vue跳轉(zhuǎn)時(shí)根據(jù)url錨點(diǎn)(#xxx)實(shí)現(xiàn)頁面內(nèi)容定位的方法
本前端仔在做頁面跳轉(zhuǎn)的時(shí)候,被要求跳轉(zhuǎn)到頁面時(shí)候,把對應(yīng)部分的內(nèi)容自動(dòng)滾動(dòng)到頂部,我一開始想到的就是根據(jù)錨點(diǎn)<a href="#xxid">進(jìn)行處理,但是發(fā)現(xiàn)不太好實(shí)現(xiàn),于是便自己研究了一個(gè)比較取巧的方法,需要的朋友可以參考下2024-04-04
vue雙向數(shù)據(jù)綁定知識(shí)點(diǎn)總結(jié)
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定的原理以及知識(shí)點(diǎn)總結(jié)，并做了代碼實(shí)例分析，有需要的朋友參考下。2018-04-04
最近工作中遇到個(gè)需求,需要實(shí)現(xiàn)個(gè)可視化圖表頁的PDF文件導(dǎo)出,所以下面這篇文章主要給大家介紹了關(guān)于利用vue如何將html頁面生成高清晰pdf文件的相關(guān)資料,需要的朋友可以參考下2022-03-03
keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁面效果的示例代碼
這篇文章主要介紹了keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁面效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06