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