在Vue中的切换类中单击后按钮消失答案

【问题标题】：The button disappear after clicked in toggle class in Vue在Vue中的切换类中单击后按钮消失
【发布时间】：2021-09-22 06:00:12
【问题描述】：

我有按钮（如心脏），我尝试在 activae（听到红色）和删除活动类之间切换，当我点击按钮时它显示为红色，但之后消失

  <button id="post_like_button_acc" class="like_button" @click="addLike(comment.id, $el,index,)" ref="Post_LikeButtonAcc">
                       <div class='large-font text-center top-20'>
                          <ion-icon name="heart" class="like_comment" :class="{ active: activeItem  == comment.id  }">
                            <div class='red-bg' ></div> 
                          </ion-icon>
                        </div>
                    <p class="" style="red; margin-left: 10px; color: white" ></p>
                    </button>



   async addLike(id, el){
       this.activeItem = id;
    }

心脏图标的CSS

    ion-icon.active{
  animation:like 0.5s 1;
  fill:red;
  stroke:none;
}

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

我建议在 CSS 中使用 :hover 和 :active。

https://developer.mozilla.org/ko/docs/Web/CSS/:active https://developer.mozilla.org/ko/docs/Web/CSS/:hover

【讨论】：

【解决方案2】：

通过在函数中添加el来获取数组中元素的div的解决方案 addLike(id, el) 这个你可以得到hte div 之后使用let icon = el.querySelector('ion-icon');

 async addLike(id, el){
    var button_clicked = $(el)
        this.activeItem = id;
            if(this.activeItem = id){
                     let icon = el.querySelector('ion-icon');
                    icon.classList.toggle('active');
            }
    }

【讨论】：