Vue 3 中使用 v-for 动态管理按钮的激活状态

<script setup>
import { ref } from 'vue';

// 定义所有分类的列表
const contentCategories = ref(["Category 1", "Category 2", "Category 3", "Category 4"]);

// 定义一个响应式变量来存储当前选中的分类
// 初始值为空字符串，表示没有分类被选中
const selectedCategory = ref('');

/**
 * 处理按钮点击事件的函数
 * @param {string} category - 被点击的分类名称
 */
const handleClick = (category) => {
  // 如果点击的分类已经是当前选中的分类，则取消选中（设置为''）
  // 否则，将当前选中的分类更新为被点击的分类
  selectedCategory.value = category === selectedCategory.value ? '' : category;
};
</script>

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

<style scoped>
.category-filter {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.filter-button:hover {
  background-color: #e0e0e0;
}

.filter-button.active {
  background-color: #007bff; /* 激活状态的背景色 */
  color: white; /* 激活状态的文字颜色 */
  border-color: #007bff; /* 激活状态的边框颜色 */
}
</style>

<script setup>
import { ref } from 'vue';

// 定义所有分类的列表，每个分类现在是一个包含name和active属性的对象
const categoriesData = ref([
  { name: "Category A", active: false },
  { name: "Category B", active: false },
  { name: "Category C", active: false },
  { name: "Category D", active: false },
]);

/**
 * 处理按钮点击事件的函数
 * @param {object} categoryItem - 被点击的分类对象
 */
const toggleCategory = (categoryItem) => {
  // 直接切换该分类对象的active属性
  categoryItem.active = !categoryItem.active;
};
</script>

<template>
  <div class="category-filter">
    <button
      v-for="category in categoriesData"
      :key="category.name"
      @click="toggleCategory(category)"
      :class="{ 'active': category.active }"
      class="filter-button"
    >
      {{ category.name }}
    </button>
  </div>
</template>

<style scoped>
.category-filter {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.filter-button:hover {
  background-color: #e0e0e0;
}

.filter-button.active {
  background-color: #28a745; /* 多选模式下使用不同的激活背景色 */
  color: white;
  border-color: #28a745;
}
</style>