vue.js中的点击和鼠标事件冲突

Question

recently,i try to write a todo demo via vuejs,however,when i write the following code

<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;
        },


    }
});

it turns out that the only the mouseenter event can be triggered correctly, the click on "delete_btn" and change event on the checkbox ,the mouseleave event not triggered. however, when i remove the mouseenter event of the parent div. the child events work .i wanna know what causes this ..can anyone help me?

Answer 1

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>