[Vuejs]-Click and mouse event conflict in vuejs

by

0👍

I think you may be working too hard at handling the event. Here’s a snippet that does what I think you want it to do. The showDeleteBtn and hideDeleteBtn methods simply set the show data member of the todo item.

var todoList = new Vue({
  el: "#item_lists",
  data: {
    todos: [{
      content: 'Hi there',
      checked: true,
      show: false
    },
    {
      content: 'Another',
      checked: true,
      show: false
    }]
  },
  methods: {
    showDeleteBtn: function(index) {
      this.todos[index].show = true;
    },
    hideDeleteBtn: function(index) {
      this.todos[index].show = false;
    },
    deleteTodo: function(todo) {
      this.todos.$remove(todo);
      return false;
    }
  }
});
.delete_bt {
  background-color: lightblue;
  padding: 0.3em 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="item_lists">
  <div class='user_choice_item' v-for="todo in todos" v-on:mouseenter="showDeleteBtn($index)" v-on:mouseleave="hideDeleteBtn($index)">
    <input type='checkbox' name='item_cbx' v-model="todo.checked" />
    <label class='with_cbx_item'>{{todo.content}}</label>
    <span class='delete_bt' v-on:click.stop="deleteTodo(todo)" v-show="todo.show">Delete</span>
  </div>
</div>

Leave a comment