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. In this case, only one of them is applied and Vue outputs a warning message.

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

Noncompliant Code Example

<template>
  <div>
    <!-- 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>
  </div>
</template>

<script>
  export default {
    props: ['foo', 'bar']
  }
</script>

Compliant Code Example

<template>
  <div>
    <!-- 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>
  </div>
</template>

<script>
  export default {
    props: ['foo', 'bar']
  }
</script>

Version

This rule was introduced in DeepScan 1.16.0-beta.

See

• v-else directive

• v-else-if directive

• [Vue warn]: v-else used on element <div> without corresponding v-if.

• [Vue warn]: text 'Foo' between v-if and v-else(-if) will be ignored.

• [Vue warn]: Failed to resolve directive: else-if