让Vue响应Map或Set的变化操作
问题背景
我想在vuex的state中使用map，这样可以使很多操作变得方便
const state = {
all: new Map()
}
这样的写法是没有问题的，不会报错，state.all可以像正常的Map一样使用。
但是这里有一个问题，vue的响应式系统不支持Map和Set，也就是说，当Map与Set里面的元素变化时Vue追踪不到这些变化，因此无法做出响应。这样一来，页面上依赖all的元素也不会随all的变化而变化
解决方法
用户”inca”的回答
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发生改变后，手动改变mySetChangeTracker的值就能让Vue知道我的数据发生了变化。
在mySetAsList里面写入var x = this.mySetChangeTracker，这样一来当mySetChangeTracker更新后，mySetAsList就会做出响应
补充知识：vue渲染时对象里面的对象的属性提示undefined，但渲染成功
场景：
从后台请求的数据结构如下：
我的list是对象，而comment又是list里的对象，渲染成功了，却报如下错：
解决办法：
添加一个：v-if
以上这篇让Vue响应Map或Set的变化操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍Vue实现动态响应数据变化，包括了Vue实现动态响应数据变化的使用技巧和注意事项，需要的朋友参考一下 Vue是MVVM模式，即Model-View-ViewModel，通过绑定数据即可以实时改变视图显示。 比如：使用v-blink动态绑定属性 使用v-html来绑定带有标签的内容（会解析标签） 使用v-text来绑定纯文本的内容（标签会以文本的形式输出） 无论通过哪种形式绑定，都需要
-
本文向大家介绍vue-router如何响应路由参数的变化？相关面试题，主要包含被问及vue-router如何响应路由参数的变化？时的应答技巧和注意事项，需要的朋友参考一下 ickt-5: 路由 vue-router 面试题: https://blog.csdn.net/Arthas_Xue/article/details/101024666 在父组件的router-view上加个key: http
-
Map 对Observable发射的每一项数据应用一个函数，执行变换操作 Map操作符对原始Observable发射的每一项数据应用一个你选择的函数，然后返回一个发射这些结果的Observable。 RxJava将这个操作符实现为map函数。这个操作符默认不在任何特定的调度器上执行。 Javadoc: map(Func1)) cast cast操作符将原始Observable发射的每一项数据都强制
-
JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。 但是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。 为了解决这个问题，最新的ES6规范引入了新的数据类型Map。要测试你的浏览器是否支持ES6规范，请执行以下代码，如果浏览器报ReferenceError错误，那
-
问题内容： Swift 1.2支持无序集合，但似乎在Sets上不起作用，因此我决定在操场上变聪明并尝试： 这似乎有效。所以我尝试扩展Set： 而且我认为有一个很好的理由为什么它不起作用，例如这里的示例： 关于如何扩展Set以可靠地使用map（_ :)的任何想法？谢谢大家 问题答案： 更新： Swift 2和3进行了很多更改。的通用占位符现在是，而不是，并且所有集合都有一个返回 数组 的方法 。 对
-
我试图用制作一个响应线图。 我用这个MWE重现了我的尝试： 如果我让浏览器更宽，线条图会像你期望的那样响应，填满空间。 我的问题是，如果我使浏览器变窄，图形不会像我使其变宽时那样调整大小以填充浏览器宽度的100%。对于新的浏览器宽度来说，它仍然太宽。有趣的是，在刷新时，图形总是占据浏览器的100%。 把浏览器做宽做窄，如何让图占据浏览器的100%？