使用Vue与JavaScript实现点赞按钮灰红两色点击切换的方法

你现在的逻辑是每次点击都固定给currentMode赋值为grid，所以按钮只会变红色无法切回灰色，只要改成状态切换逻辑即可，修改步骤如下：

1. 调整状态变量 #

你原来代码中data里定义的currentMode: this.mode存在问题：你的props里没有声明mode属性，运行会报错，直接替换为专门的点赞状态即可：

data () {
  return {
    postItem: this.post,
    isLiked: false // 初始为未点赞状态，对应灰色图标
  }
}

2. 修改模板图标绑定 #

把b-icon的属性和点击事件替换成如下写法：

<b-icon icon="heart-fill" class="gap_margin_5px_horizontal"
        :variant="isLiked ? 'danger' : ''"
        v-on:click="toggleLike"
/>

3. 新增切换点赞的方法 #

替换原来的greet方法，同时可以同步更新点赞数：

methods: {
  toggleLike: function () {
    // 切换点赞状态
    this.isLiked = !this.isLiked
    // 同步修改点赞计数
    this.postItem.good = this.isLiked ? this.postItem.good + 1 : this.postItem.good - 1
    // 如果需要保留原来的emit事件可以保留下面这行，不需要就删掉
    this.$emit('current-mode', this.isLiked ? 'grid' : '')
  }
}

修改完成后点击爱心按钮就会在红色、灰色之间来回切换，同时点赞数也会对应增减。

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