Javascript VueJS v-for，对象不显示关键帧_Javascript_Html_Vue.js_Vuejs2

Javascript VueJS v-for，对象不显示关键帧

javascript html vue.js vuejs2

Javascript VueJS v-for，对象不显示关键帧,javascript,html,vue.js,vuejs2,Javascript,Html,Vue.js,Vuejs2,问题是我正在选择选项，将它们存储在一个对象中，并使用v-for迭代对象的键并显示所选的选项。这是我的密码： data() { return { points: 100 as number, categories: [{name: "Fitness", items: "6"}, {name: "Electronics", items: "10"}, {name: "Fitness", items: "6"}, {name: "E

问题是我正在选择选项，将它们存储在一个对象中，并使用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>
    };
  }

data（）{
返回{
点数：100为数字，
类别：[{名称：“健身”，项目：“6”}，{名称：“电子”，项目：“10”}，
{名称：“健身”，项目：“6”}，{名称：“电子”，项目：“10”}，
{name:“Fitness”，items:“6”}，{name:“Electronics”，items:“10”}作为数组，
筛选器：{}作为记录
};
}

还有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>


所有类别
{{cat.name}(；{{cat.items})
{{key}}
全部清除

控制台中没有任何错误。我已经在单击时记录了filters数据对象，并向其中添加了值。我错过了什么

编辑：这里有一个指向我创建的小提琴的链接：

编辑2:阅读我在这里遇到的问题：

使用

$set

，它就可以工作了。这只是反应性问题

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

小提琴-

使用

$set

就可以了。这只是反应性问题

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

fiddle-

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

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

这样，您就可以让vue监视所有这些数据。这可能并不总是可能的（例如，在您给出的示例中），但通常情况下，这就足够了

它是javascript工作方式和VueJS处理方式的结合

例如，如果您有一个变量：

let foo = null

在机器代码的深处，foo指向一个内存地址，但由于它是空的，所以它还没有显示出来。如果您第一次设置它：

foo = 'bar'

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

如果您现在更改它：

foo = 'test'

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

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

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

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