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 meaning:
passivedeclares that the handler will not executepreventDefault().preventexecutespreventDefault()while executing the handler.
Therefore, Vue throws a compile error when passive and prevent are used together.
Noncompliant Code Example
View with compliant examples side by side<template>
<div>
<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 -->
</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>Compliant Code Example
View with noncompliant examples side by side<template>
<div>
<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>
</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
[Vue warn]: passive and prevent can't be used together. Passive handler can't prevent default event.