Vue.js click event works with mouse, but not when tapping the laptop trackpad

Question

I have the following elements in Vue:

<div class="search-result" v-for="result in search_results" v-on:click="submit(result)">
    {{ result.name }}
</div>

This displays a list of search results. On clicking a result, the submit method fires.

But, it doesn't always work.

• it works when I use my Macbook
• it works when I use a mouse on a Windows laptop
• it does NOT work when I use the trackpad on that same Windows laptop; more precisely, it doesn't work when I just tap the trackpad as I normally would. It works when I press it deeply.

Any explanation and/or solution?

What the submit method does is not really relevant, I've reduced it to console.log('what is happening') for testing and I am getting the same results above.

Answer 1

The trackpad is possibly sending a touch event instead of click.

To test this, use the DeviceToolbar in the Chrome inspector, and see if emulating mobile usage of the component also fails.

If so, try v-touch.