讓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追蹤不到這些變化，因此無(wú)法做出響應(yīng)。這樣一來(lái)，頁(yè)面上依賴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來(lái)手動(dòng)追蹤變化
Vue追蹤不到Set的變化，但是可以追蹤到mySetChangeTracker的變化，所以當(dāng)Set發(fā)生改變后，手動(dòng)改變mySetChangeTracker的值就能讓Vue知道我的數(shù)據(jù)發(fā)生了變化。
在mySetAsList里面寫入var x = this.mySetChangeTracker，這樣一來(lái)當(dāng)mySetChangeTracker更新后，mySetAsList就會(huì)做出響應(yīng)
補(bǔ)充知識(shí)：vue渲染時(shí)對(duì)象里面的對(duì)象的屬性提示undefined，但渲染成功
場(chǎng)景：
從后臺(tái)請(qǐng)求的數(shù)據(jù)結(jié)構(gòu)如下：
我的list是對(duì)象，而comment又是list里的對(duì)象，渲染成功了，卻報(bào)如下錯(cuò)：
解決辦法：
添加一個(gè)：v-if
以上這篇讓Vue響應(yīng)Map或Set的變化操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue中 this.$set的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要介紹了Vue3中操作ref的四種使用方式示例代碼(建議收藏),本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
RuoYi-Vue是一款基于SpringBoot+Vue的前后端分離極速后臺(tái)開發(fā)框架, 本文主要介紹了idea部署RuoYi-Vue分離版的圖文詳解,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能
本系列文章介紹一個(gè)簡(jiǎn)單的實(shí)時(shí)定位示例，基于VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-09-09
在本篇文章里小編給大家分享了關(guān)于vue中各種通信傳值方式的相關(guān)知識(shí)點(diǎn)，有興趣的朋友們學(xué)習(xí)下。2019-02-02
Vue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁(yè)的實(shí)例
下面小編就為大家?guī)?lái)一篇Vue利用路由鉤子token過期后跳轉(zhuǎn)到登錄頁(yè)的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-10-10
這篇文章主要介紹了Vue中的生命周期詳細(xì)解讀,每個(gè) Vue 組件實(shí)例在創(chuàng)建時(shí)都需要經(jīng)歷一系列的初始化步驟，比如設(shè)置好數(shù)據(jù)偵聽，編譯模板，掛載實(shí)例到 DOM，以及在數(shù)據(jù)改變時(shí)更新 DOM,需要的朋友可以參考下2023-08-08
vue實(shí)現(xiàn)多個(gè)echarts根據(jù)屏幕大小變化而變化實(shí)例
這篇文章主要介紹了vue實(shí)現(xiàn)多個(gè)echarts根據(jù)屏幕大小變化而變化實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07
在Vue項(xiàng)目中導(dǎo)出Excel文件時(shí),需在請(qǐng)求中設(shè)置responseType為'blob'或'arraybuffer',否則文件可能損壞無(wú)法打開,正確配置確保瀏覽器正確解析二進(jìn)制數(shù)據(jù)流,生成有效Excel文件2025-08-08
vue-cli3自動(dòng)消除console.log()的調(diào)試信息方式
這篇文章主要介紹了vue-cli3自動(dòng)消除console.log()的調(diào)試信息方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-10-10