Vue v-for循环中绑定样式/类名不生效，点击修改item.fav后样式未更新如何解决？

核心问题原因 #

1. Vue2响应式限制：如果你使用的是Vue2，且初始化items数组时，每个子项没有提前声明fav属性，直接通过item.fav = true赋值的新增属性不属于响应式属性，Vue无法监听到属性变化，不会触发视图更新。
2. 动态类名绑定语法错误：你使用类名绑定时没有加v-bind（简写为:）前缀，Vue会把{fillColor: item.fav}当做普通字符串处理，不会根据条件切换类名。
3. CSS语法错误：style中颜色值不需要加引号，多余的引号会导致样式不生效。

修复方案 #

第一步：修复响应式赋值 #

修改changeFav方法，用$set给对象新增响应式属性：

methods: {
  fillcolor(item){
    return item.fav ? 'purple' : 'orange';
  },
  changeFav(item){
    // Vue2写法，新增响应式属性
    this.$set(item, 'fav', true)
    // 若需要切换收藏状态可以写为 this.$set(item, 'fav', !item.fav)
  },
}

如果你是从接口获取items数据，建议拿到数据时就初始化fav属性，后续直接赋值也能触发响应式：

// 接口请求成功后处理数据
this.items = res.data.map(item => ({
  ...item,
  fav: false
}))

第二步：修复类名绑定写法（选类名方案时需要修改） #

<!-- 加冒号绑定动态类名 -->
<v-icon :class='{fillColor: item.fav}'>mdi-heart</v-icon>

修改CSS样式：

.fillColor {
  color: purple;
}
/* 默认颜色可以直接加在通用样式里，不用判断 */
.v-icon {
  color: orange;
}

更简洁的优化写法 #

不需要额外定义方法判断颜色，直接在模板里写逻辑即可，性能更高：

<!-- 内联样式写法 -->
<v-icon :style="{color: item.fav ? 'purple' : 'orange'}">mdi-heart</v-icon>

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