VueJS v-for，对象不显示键

Question

问题是，我正在选择选项，将它们存储在对象中，然后使用v-for遍历对象的键并显示所选的选项。这是我的代码：

data() {
    return {
      points: 100 as number,
      categories: [{name: "Fitness", items: "6"}, {name: "Electronics", items: "10"},
                   {name: "Fitness", items: "6"}, {name: "Electronics", items: "10"},
                   {name: "Fitness", items: "6"}, {name: "Electronics", items: "10"}] as Array<Record<string, string>>,
      filters: {} as Record<string, number>
    };
  }

和html

<div id="filterContainer" class="d-flex flex-column">
      <div class="d-flex flex-row justify-content-between">
        <p id="recent">All Categories</p>


        <div class="ellipsesDropdown">
            <div class="d-flex flex-column">
              <FilterIcon id="filterIcon" />
              <div v-if="filterKeys() > 0" class="filterDot align-self-end"></div>
            </div>
              <div class="dropdown-content">
                  <p v-for="(cat, ind) in categories" :key="ind" @click="filters[cat.name] = 1">{{cat.name}} &#40;{{cat.items}}&#41;</p>
              </div>
          </div>
      </div>

      <div class="d-flex flex-row flex-wrap" style="height: 32px;">
        <div v-for="(val, key, ind) in filters" :key="ind" class="filterSelection d-flex flex-row">
          {{key}}
          <CloseIcon @click="delete filters[key]" class="closeIcon" />
        </div>

        <p v-if="filterKeys() > 0" @click="filters = {}" class="clearAllText">Clear all</p>
      </div>
    </div>

控制台中没有任何错误。我已经记录了单击时的过滤器数据对象，并且确实向其中添加了值。我想念什么？

EDIT：以下是我创建的小提琴的链接：https://jsfiddle.net/ayudh37/2uqm9nar/3/

编辑2：在这里阅读我遇到的问题：https://vuejs.org/v2/guide/reactivity.html

Answer 1

使用$set，它起作用。这只是反应性问题。

this.$set(this.filters,cat,1);

小提琴-https://jsfiddle.net/Lejxtbm0/6/

Answer 2

我认为，如果您（如果可以的话）在数据对象中设置数据，则更为优雅的解决方案：

...
data: {
  filters: {
    "apples": null,
    "oranges": null,
    "pears": null
  },
  categories: ["apples", "oranges", "pears"]
},
...

这样，您告诉vue观看所有这些数据。这可能并不总是可能的（例如，在您给出的示例示例中），但通常就足够了。

这是javascript的工作方式以及VueJS对其处理方式的结合。

例如如果您有一个变量：

let foo = null

深入机器代码，foo指向一个内存地址，但是由于它为null，所以它尚未显示。如果是第一次设置：

foo = 'bar'

foo会显示该内存地址和vue视图，例如{{foo}}更新它。

如果现在更改它：

foo = 'test'

foo如果指向console.log（），它将指向'test'，但是VueJS仍然显示'bar'。使用$ set可以强制执行该行为，但是也可以通过在数据中设置它来实现。

这是一个简单的说明，并非100％正确，并且对象和数组会变得更加复杂（因为它们是指针列表），但是如果您通读所有这些内容，它将在将来对您有很大帮助。