mouseover 事件在点击 Google Chrome 之前不会触发

Question

当光标位于列表项上时，我正在尝试运行一个函数，如下所示：

<div id="vue-app">
    <ul>
        <li v-for="item in items" @mouseover="removeItem(item)">{{item}}</li>
    </ul>
</div>

new Vue({
    el: '#vue-app',
    data: {
        items: ['meat', 'fruits', 'vegetables'],
    },
    methods: {
        removeItem(value) {
            ...
        }
    },
});

但是，只有当我单击列表项时才会触发 mouseover 事件。我在这里做错了什么？

鼠标悬停

鼠标点击

Answer 1

检查此工作代码

new Vue({
    el:'#vue-app',
    data:{
        items:['meat','fruits','vegetables'],
    },
    methods:{
        removeItem(value){
          console.log(value);
        }
    },
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.js"></script>
<div id="vue-app">
        <ul>
            <li v-for="item in items" @mouseover="removeItem(item)">{{item}}</li>
        </ul>
</div>