切換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，关闭其他类别
|