切换Vue 3中v-for循环中按钮的活动状态

Question

我正在Vue 3中创建一个过滤器头部，在其中你可以选择一个类别进行查看，因此你可以点击切换过滤器的开关，如果你点击另一个类别，它将取消选择之前的活动类别，一次只能有一个或没有活动类别。

我找到了一些示例，比如这个jsfiddle，它没有可切换的按钮（再次点击取消选择）并且没有使用v-for循环。我相当有信心可以将其转换为v-for循环，但我不知道如何轻松地进行切换和一次只能有一个活动类别的操作。

这是我的基本代码：

<button
  v-for="category in contentCategories"
  @click=""
  class="filter-button"
>
  {{ category }}
</button>

const contentCategories = ["category 1", "category 2", "category 3"];

let list = contentStore.resources;
const activeCategory = "";
const filteredList = list
  .filter((e) => e.category === activeCategory)
  .map((e) => {
    return e;
});

我认为我需要的行为是将活动类别存储在activeCategory字符串中，并将活动标签应用于相应的按钮，然后能够如果再次点击活动按钮，则移除该activeCategory，或者如果点击了不同的按钮，则更改activeCategory。

如果这是一个简单的解决方案，我很抱歉，因为我对Vue非常陌生。谢谢！

Answer 1

使用组合 API

使用额外的引用进行跟踪的简单解决方案

const selectedCategory = ref("")
const contentCategories = ref(["category 1", "category 2", "category 3"]);

<button
  v-for="category in contentCategories"
  @click="handleClick(category)"
  :class="selectedCategory === category ? 'active' : 'inactive'"
  :key="category"
>
  {{ category }}
</button>

handleClick(category) {
   selectedCategory.value = category
|

如果您想要实现多个选择能力，则跟踪类别活动

const contentCategories = ref([
  {
    name: "Category 1",
    active: false
  },
  ...
]);

<button
  v-for="category in contentCategories"
  @click="handleClick(category)"
  :class="category.active ? 'active' : 'inactive'"
  :key="category"
>
  {{ category }}
</button>

handleClick(category) {
   找到类别然后设置 active = !active，关闭其他类别
|