How do I mark a mousewheel event as passive in Vue js?

Question

Chrome is warning me that I have: "Added a non-passive event listener to a scroll-blocking 'mousewheel' event".

I want that warning to go away. I'm using Vue js 2.5.13 and according to the documentation, you can use <div v-on:scroll.passive="onScroll">...</div> to make events passive. However, I cannot figure it out for a mousewheel event.

Here is my code:

<select v-model='selectWatcher'>
    <option v-for="option in myOptions" v-bind:value="option.id">{{option.name}}</option>
</select>

If it helps, selectWatcher, is a function within my vue instance's watch section.

I have tried:

<select v-model='selectWatcher' v-on:mousewheel.passive>

<select v-model='selectWatcher' v-on:mousewheel.passive="true">

<select v-model='selectWatcher' v-on:scroll.passive="mousewheel">

None of this works, and I still get the warning. What am I doing wrong? Do I need to mark the selectWatcher as passive somehow?

Answer 1

Since you're not creating a mousewheel event, you won't be able to modify the event it's complaining about. There's no way to say "make all mousewheel events passive".