return false should not be used in a Vue event handler

• VUE_BAD_EVENT_HANDLER_RETURN_FALSE
• Error
• Medium
• vue

This rule applies when the return value of a Vue event handler is false.

Unlike vanilla HTML or jQuery, returning false from a DOM event handler does not prevent event propagation or default behavior in Vue. Instead, stopPropagation() or preventDefault() should be explicitly called on the event object received as a parameter.

Noncompliant Code Example

<template>
  <a href="http://foo.com" @click="handleClick">
    foo.com
  </a>
</template>

<script>
export default {
  props: ['disabled'],
  methods: {
    handleClick() {
      if (this.disabled) {
        return false; // VUE_BAD_EVENT_HANDLER_RETURN_FALSE alarm
      }
    }
  }
}
</script>

Compliant Code Example

<template>
  <a href="http://foo.com" @click="handleClick">
    foo.com
  </a>
</template>

<script>
export default {
  props: ['disabled'],
  methods: {
    handleClick(event) {
      if (this.disabled) {
        event.preventDefault();
      }
    }
  }
}
</script>

Version

This rule was introduced in DeepScan 1.40.0.

See

• v-on directive

• Event Handling