Question

最近，我尝试通过vuejs编写一个todo演示，但是，当我编写以下代码时

user_id

// JS

<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>

事实证明，只能正确触发mouseenter事件，单击“delete_btn”并更改复选框上的事件，不会触发mouseleave事件。但是，当我删除父div的mouseenter事件。孩子们的事情有用。我想知道是什么原因造成这种情况..谁能帮助我？

Answer 1

我认为您可能在处理此事件时过于努力。这是一个我认为你想要它做的事情的片段。 showDeleteBtn和hideDeleteBtn方法只是设置show项的todo数据成员。

＆＃13;

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

＆＃13;

.delete_bt {
  background-color: lightblue;
  padding: 0.3em 1em;
}

＆＃13;

<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>

＆＃13;

vuejs中的单击和鼠标事件冲突

1 个答案: