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:

  • passive declares that the handler will not execute preventDefault().
  • prevent executes preventDefault() 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

  • Event Modifiers

  • [Vue warn]: passive and prevent can't be used together. Passive handler can't prevent default event.