Found invalid v-else-if directives JS-0631

v-else-if is not valid when:

• The directive has an argument.
• The directive has a modifier.
• The directive doesn't have an attribute value.
• The directive is on the elements that the previous element don't have v-if/v-else-if directives.
• The directive is on the elements which have v-if/v-else directives.

Bad Practice

<!-- no argument -->
<div v-if="condition_one"></div>
<div v-else-if:aaa="condition_two"></div>

<!-- no modifier -->
<div v-if="condition_one"></div>
<div v-else-if.bbb="condition_two"/>

<!-- must have Attribute Value -->
<div v-if="condition_one"></div>
<div v-else-if></div>

<!-- No previous element with v-if or v-else-if -->
<div v-else-if="condition_two"></div>

<!-- 'v-else-if' and 'v-if' directives can't exist on the same element -->
<div v-if="condition_one" v-else-if="bar"></div>

Recommended

<!-- require no argument -->
<div v-if="condition_one"></div>
<div v-else-if="condition_two"></div>

<!-- require no modifier -->
<div v-if="condition_one"></div>
<div v-else-if="condition_two"/>

<!-- Add attribute as "condition_two" -->
<div v-if="condition_one"></div>
<div v-else-if="condition_two"></div>

<!-- Add previous element with v-if or v-else-if -->
<div v-if="condition_one"/>
<div v-else-if="condition_two"></div>

<!-- 'v-else-if' and 'v-if' directives can't exist on the same element -->
<div v-if="condition_one"</div>
<div v-else-if="condition_two"/>