klicken und Mausereignis Konflikt in vuejs

Question

vor kurzem, ich versuche, eine To-do-Demo über vuejs zu schreiben, aber wenn ich den folgenden Code schreiben

<div id="item_lists"> 
       <div class='user_choice_item' v-for="todo in todos" @mouseenter="showDeleteBtn($index,$event)" v-on:mouseleave.self="hideDeleteBtn($index,$event)"> 
        <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"></span> 
       </div> 
      </div> 

// js

var todoList = new Vue({ 
    el:"#item_lists", 
    data:{ 
     todos:[] 
    }, 
    methods:{ 
     showDeleteBtn:function(index,event){ 
      event.stopPropagation(); 
      if(event.currentTarget.className!=="user_choice_item") 
       return; 

      var newState = Object.assign({},this.todos[index],{show:true}); 
      this.todos.$set(index,newState); 
     }, 
     hideDeleteBtn:function(index,event){ 
      var newState = Object.assign({},this.todos[index],{show:false}); 
      this.todos.$set(index,newState); 
     }, 
     deleteTodo:function(todo){ 

      this.todos.$remove(todo); 
      return false; 
     }, 


    } 
}); 

es stellt sich heraus, dass nur das mouseenter-Ereignis korrekt ausgelöst werden kann, der Klick auf "delete_btn" und das Ändern des Ereignisses in der Checkbox, das mouseleave-Ereignis wird nicht ausgelöst. Wenn ich jedoch das Mouseenter-Ereignis des übergeordneten div entfernen. Die Kinderereignisse arbeiten. Ich will wissen, was das verursacht .. kann jemand mir helfen?

Answer 1

Ich denke, Sie arbeiten vielleicht zu hart im Umgang mit dem Ereignis. Hier ist ein Auszug, der tut, was ich denke, dass er es tun soll. Die Methoden showDeleteBtn und hideDeleteBtn setzen einfach das Datenelement show des Elements todo.

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>