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:
- The previous element does not have
v-if
orv-else-if
directive. In this case, Vue throws a compile error. v-if
,v-else-if
, andv-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
View with compliant examples side by side<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
View with noncompliant examples side by side<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
[Vue error]: v-else/v-else-if has no adjacent v-if or v-else-if.