Событие при наведении курсора не запускается, пока пользователь не нажмет на 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 срабатывает, только когда я нажимаю на элемент списка.Что я тут не так делаю правильно?

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>