v-on directive should not have passive and prevent modifiers at the same time
- VUE_PASSIVE_WITH_PREVENT
- Error
- High
- vue
This rule applies when a v-on directive has passive and prevent modifiers at the same time.
These two modifiers have conflicting meanings:
passivedeclares that the handler will not executepreventDefault().preventexecutespreventDefault()while executing the handler.
If you use them together, you will see a warning from the browser and the default behavior will not be prevented.
Noncompliant Code Example
View with compliant examples side by side<template>
<a href="#" @click.passive.prevent="handleClick">Click here and stay.</a> <!-- VUE_PASSIVE_WITH_PREVENT alarm -->
<div class="small-box" @wheel.passive.prevent="doSomething">Use wheel to scroll down and read further.</div> <!-- VUE_PASSIVE_WITH_PREVENT alarm -->
</template>
<script>
export default {
methods: {
handleClick(e) {
// Handle click event.
},
doSomething(e) {
// Some computation that might delay handling wheel event.
}
}
}
</script>
<style>
.small-box {
width: 100px;
height: 70px;
overflow: scroll;
}
</style>Compliant Code Example
View with noncompliant examples side by side<template>
<a href="#" @click.prevent="handleClick">Click here and stay.</a>
<div class="small-box" @wheel.passive="doSomething">Use wheel to scroll down and read further.</div>
</template>
<script>
export default {
methods: {
handleClick(e) {
// Handle click event.
},
doSomething(e) {
// Some computation that might delay handling wheel event.
}
}
}
</script>
<style>
.small-box {
width: 100px;
height: 70px;
overflow: scroll;
}
</style>Version
This rule was introduced in DeepScan 1.18.0.
See
Chrome Warning: Unable to preventDefault inside passive event listener invocation.