Vue.js动态按钮点击变色实现问题求助

我来帮你用Vue的响应式思路实现这个功能，比原生操作DOM更贴合Vue的设计理念，代码也更简洁~

实现思路 #

核心是用响应式数据记录当前选中的按钮标识，然后通过动态class绑定，让按钮根据选中状态自动切换样式，完全不用手动操作DOM元素。

具体步骤&代码修改 #

1. 添加响应式状态
   在组件的data里新增一个变量，用来存储当前选中的考试项的唯一标识（你的按钮id是exam-id-season-year的组合，咱们就用这个组合作为唯一key）：

export default {
  data() {
    return {
      title: '你的标题',
      startButton: '开始按钮',
      selectedExamKey: null // 记录当前选中的按钮唯一标识
    }
  },
  // ... 你的其他属性（比如getExam相关的computed或data）
}

2. 修改按钮的动态class绑定
   把原来固定的btn-secondary换成动态class，根据当前项是否被选中来切换btn-primary和btn-secondary，同时保留其他基础class：

<button 
  class="exam exam-btn btn btn-lg btn-block"
  :id="`exam-${exam.id}-${exam.season}-${exam.year}-btn`"
  :class="{
    'btn-primary': selectedExamKey === `${exam.id}-${exam.season}-${exam.year}`,
    'btn-secondary': selectedExamKey !== `${exam.id}-${exam.season}-${exam.year}`
  }"
  @click="selectedExamKey = `${exam.id}-${exam.season}-${exam.year}`"
>
  <span>{{ exam.season_de }} {{ exam.year }}</span>
</button>

3. 关键部分说明

• :class的对象语法：当selectedExamKey等于当前项的组合key时，添加btn-primary类，否则添加btn-secondary类
• @click点击事件：点击按钮时，把当前项的组合key赋值给selectedExamKey，Vue会自动更新所有按钮的class样式，实现“点击的按钮高亮，其他恢复原色”的效果

完整组件示例（简化版） #

<template>
  <div id="exam-screen" class="exam jumbotron">
    <h1>{{ title }}</h1>
    <div class="row">
      <p class="col-md-6" v-for="exam in getExam" :key="exam.id">
        <button 
          class="exam exam-btn btn btn-lg btn-block"
          :id="`exam-${exam.id}-${exam.season}-${exam.year}-btn`"
          :class="{
            'btn-primary': selectedExamKey === `${exam.id}-${exam.season}-${exam.year}`,
            'btn-secondary': selectedExamKey !== `${exam.id}-${exam.season}-${exam.year}`
          }"
          @click="selectedExamKey = `${exam.id}-${exam.season}-${exam.year}`"
        >
          <span>{{ exam.season_de }} {{ exam.year }}</span>
        </button>
      </p>
    </div>
    <div class="row">
      <p class="col-md-8"></p>
      <BaseButton>{{ startButton }}</BaseButton>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '考试选择',
      startButton: '开始考试',
      selectedExamKey: null
    }
  },
  computed: {
    // 假设你的getExam是一个计算属性，这里示例一下
    getExam() {
      // 替换成你的实际数据
      return [
        { id: 1, season: 'spring', year: 2024, season_de: 'Frühling' },
        { id: 2, season: 'autumn', year: 2023, season_de: 'Herbst' }
      ]
    }
  }
}
</script>

和原生JS实现的区别 #

原生JS是手动找到DOM元素添加/移除类，而Vue是通过数据驱动视图：当selectedExamKey变化时，Vue自动更新所有相关按钮的class，代码更易维护，也避免了直接操作DOM带来的潜在问题。

内容的提问来源于stack exchange，提问作者Snowappix