vue/no-dupe-v-else-if
disallow duplicate conditions in
v-if/v-else-ifchains
- ⚙️ This rule is included in all of
"plugin:vue/essential",*.configs["flat/essential"],"plugin:vue/vue2-essential",*.configs["flat/vue2-essential"],"plugin:vue/strongly-recommended",*.configs["flat/strongly-recommended"],"plugin:vue/vue2-strongly-recommended",*.configs["flat/vue2-strongly-recommended"],"plugin:vue/recommended",*.configs["flat/recommended"],"plugin:vue/vue2-recommended"and*.configs["flat/vue2-recommended"].
📖 Rule Details
This rule disallows duplicate conditions in the same v-if / v-else-if chain.
<template>
<!-- ✗ BAD -->
<div v-if="isSomething(x)" />
<div v-else-if="isSomething(x)" />
<div v-if="a" />
<div v-else-if="b" />
<div v-else-if="c && d" />
<div v-else-if="c && d" />
<div v-if="n === 1" />
<div v-else-if="n === 2" />
<div v-else-if="n === 3" />
<div v-else-if="n === 2" />
<div v-else-if="n === 5" />
<!-- ✓ GOOD -->
<div v-if="isSomething(x)" />
<div v-else-if="isSomethingElse(x)" />
<div v-if="a" />
<div v-else-if="b" />
<div v-else-if="c && d" />
<div v-else-if="c && e" />
<div v-if="n === 1" />
<div v-else-if="n === 2" />
<div v-else-if="n === 3" />
<div v-else-if="n === 4" />
<div v-else-if="n === 5" />
</template>
This rule can also detect some cases where the conditions are not identical, but the branch can never execute due to the logic of || and && operators.
<template>
<!-- ✗ BAD -->
<div v-if="a || b" />
<div v-else-if="a" />
<div v-if="a" />
<div v-else-if="b" />
<div v-else-if="a || b" />
<div v-if="a" />
<div v-else-if="a && b" />
<div v-if="a && b" />
<div v-else-if="a && b && c" />
<div v-if="a || b" />
<div v-else-if="b && c" />
<div v-if="a" />
<div v-else-if="b && c" />
<div v-else-if="d && (c && e && b || a)" />
</template>
🔧 Options
Nothing.
👫 Related Rules
🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0