javascript - 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>

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

编辑：这是我创建的小提琴的链接：https ://jsfiddle.net/ayudh37/2uqm9nar/3/

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

标签： javascripthtmlvue.jsvuejs2

Answer 1

使用$set它就可以了。这只是反应性问题。

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

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