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事件才会触发。我在这里做的不正确？

鼠标移到

的mouseClicked

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>