如何通过点击切换v-icon的颜色？添加样式未生效求解决

核心问题分析 #

你的代码存在两个关键问题导致样式不生效：

1. 数据未同步更新：点击事件里只修改了局部变量active，没有更新channels数组中对应频道的active状态，导致视图的v-if/v-else判断没有变化，图标类名切换逻辑失效。
2. 样式优先级/作用域问题：即使类名正确切换，Vue单文件组件的scoped样式无法穿透Vuetify的v-icon内部SVG元素，或者Vuetify内置样式优先级更高，导致自定义fill样式不生效。

解决方案 #

1. 修复数据更新逻辑 #

修改onToggleChannel方法，找到对应频道并更新其active状态，确保视图能响应变化：

methods: {
  onToggleChannel(active, name) {
    const nameCapital = name.toUpperCase();
    // 找到当前点击的频道对象
    const targetChannel = this.channels.find(channel => channel.name === name);
    
    if (targetChannel) {
      // 切换active状态
      targetChannel.active = !active;
      
      // 更新channelList数组
      if (targetChannel.active && !this.channelList.includes(nameCapital)) {
        this.channelList.push(nameCapital);
      } else if (!targetChannel.active) {
        this.channelList = this.channelList.filter(item => item !== nameCapital);
      }
    }
  }
}

2. 修复样式不生效问题 #

有两种可选方案：

方案A：使用深度选择器穿透scoped样式

如果你的样式是写在单文件组件的scoped标签内，需要用深度选择器让样式作用到v-icon内部的SVG元素：

<style scoped>
::v-deep .checkbox-off {
  fill: #b3b3b3 !important;
}
</style>

注：Vue 3中推荐使用:deep()替代::v-deep，写法为:deep(.checkbox-off) { ... }。

方案B：直接绑定color属性（更简洁）

不需要额外类名，直接通过v-icon的color属性绑定状态，省去样式编写：

<v-btn class="channel-button mr-3 pa-4" tile icon>
  <v-icon :color="channel.active ? 'currentColor' : '#b3b3b3'">
    {{ channel.icon }}
  </v-icon>
</v-btn>

这样可以直接根据channel.active状态切换图标颜色，无需额外处理样式优先级问题。

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