Note

This is a documentation for version 7.0.0-beta.2.
To check version 6.2.2 go here. To check previous releases go here.

# vue/no-dupe-v-else-if

disallow duplicate conditions in v-if / v-else-if chains

  • ⚙️ This rule is included in all of "plugin:vue/vue3-essential", "plugin:vue/essential", "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-recommended" and "plugin:vue/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>
Now loading...

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>
Now loading...

# 🔧 Options

Nothing.

# 🔍 Implementation