v-else directive should be used in proper place

• VUE_INVALID_V_ELSE
• Error
• High, Medium
• vue

This rule applies when v-else directive is used in improper places.

v-else directive has the meaning of specifying the alternative of the previous element.
So, it is invalid to use v-else in the following cases:

1. The previous element does not have v-if or v-else-if directive. In this case, Vue throws a compile error.
2. v-if, v-else-if, and v-else directives are used in the same element.

This rule also applies to v-else-if directive which has the same restriction as v-else.

Noncompliant Code Example

<template>
  <!-- Example 1 -->
  <div>
    foo is 1
  </div>
  <div v-else> <!-- VUE_INVALID_V_ELSE alarm because the preceding element does not have 'v-if'. -->
    foo is not 1
  </div>

  <!-- Example 2 -->
  <div v-if="bar === 1" v-else-if="bar === 2"> <!-- VUE_INVALID_V_ELSE alarm because 'v-if' and 'v-else-if' are used in the same element. -->
    bar is 1 or 2
  </div>
</template>

Compliant Code Example

<template>
  <!-- Example 1 -->
  <div v-if="foo === 1">
    foo is 1
  </div>
  <div v-else>
    foo is not 1
  </div>

  <!-- Example 2 -->
  <div v-if="bar === 1 || bar === 2">
    bar is 1 or 2
  </div>
</template>

Version

This rule was introduced in DeepScan 1.16.0-beta.

See

• Built-in Directives: v-else

• Built-in Directives: v-else-if

• [Vue error]: v-else/v-else-if has no adjacent v-if or v-else-if.