vue鼠标移入显示点赞图标，移出隐藏点赞图标，现在我想点击点赞图标，鼠标移出不会隐藏图标，怎么做？

Question

<template>

<div class='cell reply_area reply_item' v-for="(c, i) in comment_list"                         
@mouseover="showLike(i)"  @mouseleave="hideLike(i)">
   <a href='javascript:void(0);' class='reward_reply_btn' reply_id=''>
      <img class="like" :src="c.like" title="点赞" v-show="c.likeOne"
           @click="likePoint(i)"/>{{c.like_count}}
  </a> 

</template>

<script>
export default {
name:'aaa'
data(){

return{
  comment_list:[{
      id:1,
      likeOne: false,    //鼠标移入移出显示隐藏点赞
      likeBox: false,    //点赞数取反
      like_count: '',    //赋值点赞数
    },
    {
      id:2,         
      likeOne: false,    //鼠标移入移出显示隐藏点赞
      likeBox: false,    //点赞数取反
      like_count: '',    //赋值点赞数
    },
    {
      id:3, 
      likeOne: false,    //鼠标移入移出显示隐藏点赞
      likeBox: false,    //点赞数取反
      like_count: '',    //赋值点赞数
    },
  ]   
}

},
methods: {

// 鼠标移入显示点赞
showLike(i){
  this.comment_list[i].likeOne = true;
},
// 鼠标移出隐藏点赞
hideLike(i){
  this.comment_list[i].likeOne = false;
},
// 点赞
likePoint(i){
  if (!this.comment_list[i].likeBox){
    this.comment_list[i].like_count++;    
  }else{ 
    this.comment_list[i].like_count--;   
  }
    this.comment_list[i].likeBox=!this.comment_list[i].likeBox;
},      

},
}
</script>

Answer 1

mouseover和mouseleave的时候做下判断是否已经点赞过了
预览：https://codepen.io/anon/pen/a...
满意请采纳！

Answer 2

设置个全局变量flag=true

  data() {
    return {
      flag: true
    };
  },

移出事件如下

hideLike(i){
 if(this.flag==true){
   this.comment_list[i].likeOne = false;
 }
}

点击事件

likePoint(i){
   this.flag=false
  if (!this.comment_list[i].likeBox){
    this.comment_list[i].like_count++;    
  }else{ 
    this.comment_list[i].like_count--;   
  }
    this.comment_list[i].likeBox=!this.comment_list[i].likeBox;
},  

用flag控制移除事件隐藏事件是否触发，刷新页面falg为默认值true，点赞以后flag为false，所以走不了移除事件。