Vue.js 实现列表按钮点击时仅为当前点击按钮更改颜色

核心问题根源 #

• 所有按钮的类绑定都读取同一个全局布尔值clicked，没有为每个按钮做独立的状态区分，一旦这个值改变，所有绑定了该值的按钮都会同步更新样式
• 自定义样式的语法写法错误：CSS属性和值之间需要用冒号分隔，原代码写的background-color= red是无效语法，就算状态判断正确样式也不会生效
• 存在变量名不匹配的隐患：模板中v-for循环读取的是genreArray，但你定义的按钮数组变量名是genreButton，会导致动态渲染拿不到数据
• 原生JS语法错误：定义数组内的对象时，键和值之间需要用冒号分隔，原代码写的id='1234'是赋值语句，不是合法的对象键值对写法，会导致数组初始化报错

具体修正步骤 #

• 调整状态存储逻辑：不再用全局布尔值记录点击状态，改为存储当前被选中按钮的唯一标识（可以用v-for的索引、或者数据自带的id字段做唯一值，用id更稳定，不会受数组顺序变动影响）
• 修改点击事件方法：点击触发时把当前按钮的唯一标识赋值给存储选中状态的变量，可按需实现再次点击取消选中的逻辑
• 修正类绑定判断逻辑：每个按钮渲染时，对比自身的唯一标识和全局存储的选中值，相等才给当前按钮加clicked类
• 修正样式语法：把无效的等号分隔改成CSS标准的冒号分隔

修正后的完整代码 #

组件逻辑（data + methods） #

data() {
  return {
    // 存储当前选中按钮的id，无选中时为null
    selectedGenreId: null,
    // 与模板循环的变量名保持一致
    genreArray: [
      { id: '1234', name: 'buttonOne' },
      // 其余同结构的按钮对象
    ]
  }
},
methods: {
  genreButton(genre) {
    // 点击逻辑：如果点的是当前已选中的按钮，就清空选中状态；否则记录当前按钮的id
    this.selectedGenreId = this.selectedGenreId === genre.id ? null : genre.id
  }
}

模板代码 #

<div
  class="form-inline"
  v-for="genre in genreArray"
  :key="genre.id"
>
  <button 
    class="btn m-1" 
    type="button" 
    @click="genreButton(genre)" 
    :class="{ 'clicked': selectedGenreId === genre.id }"
  >
    {{ genre.name }}
  </button>
</div>

自定义样式 #

.clicked {
  background-color: red;
}

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