Vuejs: класс не работает должным образом в шаблоне

Question

Привязка к классу не работает должным образом при использовании шаблона, как показано на рисунке ниже:

У меня есть массив со многими категориями, и когда пользователь щелкает его, он имеет чтобы отфильтровать, это я уже сделал, для чьей категории он хочет. Моя проблема в том, что, как только я нажимаю в другой категории, те, что были до этого, все еще включаются.

Шаблон получает массив, такой как:

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>

Вызов внутри элемента #app:

<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);
        }
  }
});

Answer 1

Похоже, что currentFilter ограничен отдельным компонентом категории. Каждый раз, когда вы устанавливаете его, вы устанавливаете его для этого компонента. Переместите его в родительскую область, чтобы для всех ваших категорий был только один currentFilter.