查看未更新 Vue.js 中的设置更改答案

【问题标题】：View not updating on Set changes in Vue.js查看未更新 Vue.js 中的设置更改
【发布时间】：2021-12-27 13:53:11
【问题描述】：

在 Vue.js 中，我有这段代码（带有 Typescript Vue.js 2 和分类组件）：

toggle(id: string): void {
    if (this.selectedIds.has(id)) {
      this.selectedIds.delete(id);
    } else {
      this.selectedIds.add(id);
    }
  }

和

get handledUsers() {
    return this.users.map((user) => ({
      ...user,
      selected: this.selectedIds.has(user._id),
    }));
  }

其中selectedIds 是Set<string>。

问题是在 Vue.js 中，Set 没有被修改为 Array，所以当我更新 Set 时，Vue.js 似乎没有检测到它，就好像我做了一个数组的.splice()。如何更新视图？

【问题讨论】：

你试过“this.forceUpdate()”吗？
这个问题并不准确。 “gethandledUsers”——你使用组件类吗？这不是不言而喻的事情。你使用 Vue 2 吗？问题应该提到这一点。 Vue 3 支持响应式 Set
是的，它与 Vuejs 和组件类一起使用，应该可以理解，但我可以编辑问题

标签： vue.js

【解决方案1】：

您可以为要更新的元素或组件添加键，然后更改键值。更改元素或组件的键值会使主题重新呈现。

这是一个例子：

<div :key="refreshKey" >
    some content...
</div>

更改 refreshKey 的值会导致此 div 重新呈现并更新其内容。所以你应该在你的组件数据中定义一个 refreshKey，然后在你的切换方法中改变它的值，例如从 true 到 false。

【讨论】：