Vue.js Vuejs:类在模板中未按预期工作

使用模板时，类绑定未按预期工作，如下图所示：

我有一个包含许多类别的数组，当用户单击它时，它必须进行筛选，我已经进行了筛选，他想要为谁的类别进行筛选。我的问题是，一旦我在其他类别中单击，之前的类别仍会显示

模板接收一个数组，例如：

categories: ["todos", "beer", "eco-bag", "paper-bag", "suplementos", "chas", "doces", "chocolates", "dieteticos"]

以下是模板：

<template id="category-box">
  <span :class="{active: currentFilter == category}" @click="setFilter(category)">
     {{category}}
  </span>
</template>

---

看起来currentFilter的作用域是单个类别组件。每次设置它时，都是为该组件设置它。将其移动到父作用域，以便所有类别只有一个currentFilter。

看起来currentFilter的作用域是单个类别组件。每次设置它时，都是为该组件设置它。将其移动到父范围，以便所有类别只有一个currentFilter。

谢谢！我想使用事件总线我可以解决这个问题。工作得很有魅力！我将对象作为道具传递，并在模板中使用v-for指令。谢谢！我想使用事件总线我可以解决这个问题。工作得很有魅力！我将对象作为道具传递，并在模板内部使用v-for指令。

<div id="category">
    <category v-for="category in categories" :category="category"></category>
</div>

const Category = Vue.component("category", {
  template: "#category-box",
  props: {
    "category": String,
  },
  data: function() {
    return {
      currentFilter: "todos"
    }
  },
  methods: {
    setFilter: function(filter) {
      this.currentFilter = filter;
      this.$parent.$emit('filteredCategory', filter);
        }
  }
});