Should use-v-on-exact ignore the .native modifier?

[cjpearson]

Tell us about your environment

• ESLint version: 5.10.0
• eslint-plugin-vue version: 5.0.0
• Node version: 10.13.0

What did you do?

I have a situation where I need to bind to a component's change event along with a native change event.
The code looks something like this.

<some-component @change="change" @change.native="nativeChange"/>

What did you expect to happen?

No error. I don't think the .exact modifier should be necessary here.

What actually happened?

warning Consider to use '.exact' modifier vue/use-v-on-exact

[h0rn3z0r]

I see the same error when trying to use 'once' modifier:

<link @mouseenter.once="addTooltipToDOM" @mouseenter="showTooltip" />

[michalsnik]

Thank you for opening this issue @h0rn3z0r I analysed this problem, and here are more cases I could've think about:

Native Elements:

<!-- Good -->
<button @click="foo"></button>
<button @click="foo" @click.stop="bar"></button>
<button @click.exact="foo" @click.ctrl="bar"></button>
<button @click.exact="foo" @click.ctrl.exact="bar" @click.ctrl.shift="baz"></button>
<button @click.ctrl.exact="foo" @click.ctrl.shift="bar"></button>
<button @click="foo" @click.stop="bar"></button>

<!-- Bad -->
<button @click="foo" @click.ctrl="bar"></button>
<button @click="foo" @click.ctrl.stop="bar"></button>
<button @click.prevent="foo" @click.ctrl="bar"></button>
<button @click.exact="foo" @click.ctrl="bar" @click.ctrl.shift="baz"></button>

Custom Components:

<!-- Good -->
<UiButton @click="foo" />
<UiButton @click="foo" @click.native="bar" />
<UiButton @click="foo" @click.native.ctrl="bar" />
<UiButton @click="foo" @click.native.exact="bar" @click.native.ctrl="baz" />
<UiButton @click.native.exact="bar" @click.ctrl.native="baz" />
<UiButton @click.native.ctrl.exact="foo" @click.native.ctrl.shift="bar" />
<UiButton @click.native="foo" @click.native.stop="bar" />
<UiButton @click.native.stop="foo" @click.native.prevent="bar" />

<!-- Bad -->
<UiButton @click="foo" @click.native="bar" @click.ctrl.native="baz" />
<UiButton @click.native.ctrl="foo" @click.native.ctrl.shift="bar" />

So I think we shouldn't introduce blacklist here, but rather whitelist possible scenarios. The rule should warn only about using native events that might overlap each other and that can be fixed by using .exact modifiers, so the only events we should consider are those that contain some key, system key or mouse modifiers.

I'm on it.