Vue+BootstrapVue点赞图标点击切换红灰颜色功能异常求助

问题根因 #

你当前代码无法实现切换的核心原因有两个：

• greet方法每次点击都会强制将currentMode赋值为传入的'grid'，没有对当前已有的状态做反转判断，点击后永远是currentMode = 'grid'的状态，自然无法切回灰色
• data中currentMode初始化引用了不存在的this.mode属性，初始状态可能不符合预期

修复方案 #

第一步：调整data初始化逻辑 #

将currentMode默认值设为空字符串，保证初始状态为灰色：

data () {
  return {
    postItem: this.post,
    currentMode: '' // 初始为空，对应灰色状态
  }
}

第二步：修改greet方法的状态切换逻辑 #

点击时先判断当前currentMode是否等于传入的mode，相等就清空（切回灰色），不相等就赋值（切为红色）：

methods: {
  greet: function (mode) {
    if (mode !== 'grid' && mode !== 'map') {
      mode = 'grid'
    }
    // 核心切换逻辑：状态相同则清空，不同则赋值
    this.currentMode = this.currentMode === mode ? '' : mode
    this.$emit('current-mode', this.currentMode)
  }
}

模板部分的b-icon代码不需要修改，原有variant的判断逻辑已经可以适配新的状态规则。

可选优化：同步更新点赞计数 #

如果需要点击时同步修改页面显示的点赞数，可以调整greet逻辑如下：

greet: function (mode) {
  if (mode !== 'grid' && mode !== 'map') {
    mode = 'grid'
  }
  const isActivated = this.currentMode === mode
  this.currentMode = isActivated ? '' : mode
  // 同步更新点赞数
  if (mode === 'grid') {
    this.postItem.good = isActivated ? this.postItem.good - 1 : this.postItem.good + 1
  }
  this.$emit('current-mode', this.currentMode)
}

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