From b9b5186534e60e2b8af114b84c845a3400f24241 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <git@flo-edelmann.de>
Date: Thu, 22 Jun 2023 14:53:19 +0200
Subject: [PATCH 1/3] Improve `vue/no-use-v-if-with-v-for` description

---
 docs/rules/index.md                  | 2 +-
 docs/rules/no-use-v-if-with-v-for.md | 4 ++--
 lib/rules/no-use-v-if-with-v-for.js  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/rules/index.md b/docs/rules/index.md
index c2093a8c4..4957d760d 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -87,7 +87,7 @@ Rules in this category are enabled for all presets provided by eslint-plugin-vue
 | [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  | :three::two::hammer: |
 | [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes | :bulb: | :three::two::hammer: |
 | [vue/no-use-computed-property-like-method](./no-use-computed-property-like-method.md) | disallow use computed property like method |  | :three::two::warning: |
-| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  | :three::two::hammer: |
+| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow using `v-if` on the same element as `v-for` |  | :three::two::hammer: |
 | [vue/no-useless-template-attributes](./no-useless-template-attributes.md) | disallow useless attribute on `<template>` |  | :three::two::warning: |
 | [vue/no-v-for-template-key-on-child](./no-v-for-template-key-on-child.md) | disallow key of `<template v-for>` placed on child elements |  | :three::warning: |
 | [vue/no-v-for-template-key](./no-v-for-template-key.md) | disallow `key` attribute on `<template v-for>` |  | :two::warning: |
diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index 4e93ea46a..9ea97f177 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -2,12 +2,12 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-use-v-if-with-v-for
-description: disallow use v-if on the same element as v-for
+description: disallow using `v-if` on the same element as `v-for`
 since: v4.6.0
 ---
 # vue/no-use-v-if-with-v-for
 
-> disallow use v-if on the same element as v-for
+> disallow using `v-if` on the same element as `v-for`
 
 - :gear: 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"`.
 
diff --git a/lib/rules/no-use-v-if-with-v-for.js b/lib/rules/no-use-v-if-with-v-for.js
index 650eb0d96..e3e7cafc6 100644
--- a/lib/rules/no-use-v-if-with-v-for.js
+++ b/lib/rules/no-use-v-if-with-v-for.js
@@ -38,7 +38,7 @@ module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
-      description: 'disallow use v-if on the same element as v-for',
+      description: 'disallow using `v-if` on the same element as `v-for`',
       categories: ['vue3-essential', 'essential'],
       url: 'https://eslint.vuejs.org/rules/no-use-v-if-with-v-for.html'
     },

From 72e3b2c7da82e2b5978732185b9a3682fa3be5c4 Mon Sep 17 00:00:00 2001
From: Flo Edelmann <git@flo-edelmann.de>
Date: Thu, 22 Jun 2023 14:53:55 +0200
Subject: [PATCH 2/3] Add new `vue/no-use-v-else-with-v-for` rule

---
 docs/rules/index.md                         |   1 +
 docs/rules/no-use-v-else-with-v-for.md      |  54 +++++++++++
 docs/rules/no-use-v-if-with-v-for.md        |   4 +
 lib/index.js                                |   1 +
 lib/rules/no-use-v-else-with-v-for.js       |  49 ++++++++++
 tests/lib/rules/no-use-v-else-with-v-for.js | 101 ++++++++++++++++++++
 6 files changed, 210 insertions(+)
 create mode 100644 docs/rules/no-use-v-else-with-v-for.md
 create mode 100644 lib/rules/no-use-v-else-with-v-for.js
 create mode 100644 tests/lib/rules/no-use-v-else-with-v-for.js

diff --git a/docs/rules/index.md b/docs/rules/index.md
index 4957d760d..9f9c8b161 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -251,6 +251,7 @@ For example:
 | [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: | :hammer: |
 | [vue/no-unused-properties](./no-unused-properties.md) | disallow unused properties |  | :hammer: |
 | [vue/no-unused-refs](./no-unused-refs.md) | disallow unused refs |  | :hammer: |
+| [vue/no-use-v-else-with-v-for](./no-use-v-else-with-v-for.md) | disallow using `v-else-if`/`v-else` on the same element as `v-for` |  | :hammer: |
 | [vue/no-useless-mustaches](./no-useless-mustaches.md) | disallow unnecessary mustache interpolations | :wrench: | :hammer: |
 | [vue/no-useless-v-bind](./no-useless-v-bind.md) | disallow unnecessary `v-bind` directives | :wrench: | :hammer: |
 | [vue/no-v-text](./no-v-text.md) | disallow use of v-text |  | :hammer: |
diff --git a/docs/rules/no-use-v-else-with-v-for.md b/docs/rules/no-use-v-else-with-v-for.md
new file mode 100644
index 000000000..efdb8b293
--- /dev/null
+++ b/docs/rules/no-use-v-else-with-v-for.md
@@ -0,0 +1,54 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-use-v-else-with-v-for
+description: disallow using `v-else-if`/`v-else` on the same element as `v-for`
+---
+# vue/no-use-v-else-with-v-for
+
+> disallow using `v-else-if`/`v-else` on the same element as `v-for`
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
+## :book: Rule Details
+
+This rule reports elements that have both `v-else-if`/`v-else` and `v-for` directives. That is valid in Vue (`v-else-if`/`v-else` will take precedence), but is confusing to read.
+
+<eslint-code-block :rules="{'vue/no-use-v-else-with-v-for': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div v-if="foo">foo</div>
+  <template v-else-if="bar">
+    <div v-for="x in xs">{{ x }}</div>
+  </template>
+  <template v-else>
+    <div v-for="x in xs">{{ x }}</div>
+  </template>
+
+  <!-- ✗ BAD -->
+  <div v-if="foo">foo</div>
+  <div v-else-if="bar" v-for="x in xs">{{ x }}</div>
+  <div v-else v-for="x in xs">{{ x }}</div>
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :mute: When Not To Use It
+
+If you don't find using `v-else-if`/`v-else` together with `v-for` confusing to read, you can safely disable this rule.
+
+## :couple: Related Rules
+
+- [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-use-v-else-with-v-for.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-use-v-else-with-v-for.js)
diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index 9ea97f177..49535f2c1 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -88,6 +88,10 @@ There are two common cases where this can be tempting:
 
 </eslint-code-block>
 
+## :couple: Related Rules
+
+- [vue/no-use-v-else-with-v-for](./no-use-v-else-with-v-for.md)
+
 ## :books: Further Reading
 
 - [Style guide - Avoid v-if with v-for](https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for)
diff --git a/lib/index.js b/lib/index.js
index 66ab217bd..68207c019 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -147,6 +147,7 @@ module.exports = {
     'no-unused-refs': require('./rules/no-unused-refs'),
     'no-unused-vars': require('./rules/no-unused-vars'),
     'no-use-computed-property-like-method': require('./rules/no-use-computed-property-like-method'),
+    'no-use-v-else-with-v-for': require('./rules/no-use-v-else-with-v-for'),
     'no-use-v-if-with-v-for': require('./rules/no-use-v-if-with-v-for'),
     'no-useless-concat': require('./rules/no-useless-concat'),
     'no-useless-mustaches': require('./rules/no-useless-mustaches'),
diff --git a/lib/rules/no-use-v-else-with-v-for.js b/lib/rules/no-use-v-else-with-v-for.js
new file mode 100644
index 000000000..a3e0244b7
--- /dev/null
+++ b/lib/rules/no-use-v-else-with-v-for.js
@@ -0,0 +1,49 @@
+/**
+ * @author Yosuke Ota
+ *
+ * Style guide: https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for
+ */
+'use strict'
+
+const { defineTemplateBodyVisitor, hasDirective } = require('../utils')
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'disallow using `v-else-if`/`v-else` on the same element as `v-for`',
+      categories: null,
+      url: 'https://eslint.vuejs.org/rules/no-use-v-else-with-v-for.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      unexpectedDirectiveWithVFor:
+        'Unexpected `{{ directiveName }}` and `v-for` on the same element. Move `{{ directiveName }}` to a wrapper element instead.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    return defineTemplateBodyVisitor(context, {
+      /** @param {VDirective} node */
+      "VAttribute[directive=true][key.name.name='for']"(node) {
+        const element = node.parent.parent
+
+        if (hasDirective(element, 'else-if')) {
+          context.report({
+            node: element,
+            messageId: 'unexpectedDirectiveWithVFor',
+            data: { directiveName: 'v-else-if' }
+          })
+        } else if (hasDirective(element, 'else')) {
+          context.report({
+            node: element,
+            messageId: 'unexpectedDirectiveWithVFor',
+            data: { directiveName: 'v-else' }
+          })
+        }
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/no-use-v-else-with-v-for.js b/tests/lib/rules/no-use-v-else-with-v-for.js
new file mode 100644
index 000000000..7fe54df1c
--- /dev/null
+++ b/tests/lib/rules/no-use-v-else-with-v-for.js
@@ -0,0 +1,101 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-use-v-else-with-v-for')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2015 }
+})
+
+tester.run('no-use-v-else-with-v-for', rule, {
+  valid: [
+    {
+      // caught by `vue/no-use-v-if-with-v-for`
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="foo" v-for="x in xs">{{ x }}</div>
+        </template>
+      `
+    },
+    {
+      // `v-if`/`v-else-if`/`v-else` only
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="foo">{{ x }}</div>
+          <div v-else-if="foo">{{ x }}</div>
+          <div v-else="foo">{{ x }}</div>
+        </template>
+      `
+    },
+    {
+      // `v-for` only
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-for="x in xs">{{ x }}</div>
+        </template>
+      `
+    },
+    {
+      // `v-else-if`/`v-else` in template + `v-for`
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="foo">foo</div>
+          <template v-else-if="bar">
+            <div v-for="x in xs">{{ x }}</div>
+          </template>
+          <template v-else>
+            <div v-for="x in xs">{{ x }}</div>
+          </template>
+        </template>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="foo">foo</div>
+          <div v-else v-for="x in xs">{{ x }}</div>
+        </template>
+      `,
+      errors: [
+        {
+          message:
+            'Unexpected `v-else` and `v-for` on the same element. Move `v-else` to a wrapper element instead.',
+          line: 4,
+          endLine: 4,
+          column: 11,
+          endColumn: 52
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="foo">foo</div>
+          <div v-else-if="bar" v-for="x in xs">{{ x }}</div>
+        </template>
+      `,
+      errors: [
+        {
+          message:
+            'Unexpected `v-else-if` and `v-for` on the same element. Move `v-else-if` to a wrapper element instead.',
+          line: 4,
+          endLine: 4,
+          column: 11,
+          endColumn: 61
+        }
+      ]
+    }
+  ]
+})

From c5b53da4ec763fbf53557c5ff8e6e8037671743b Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Sun, 2 Jul 2023 16:57:09 +0900
Subject: [PATCH 3/3] Apply suggestions from code review

---
 lib/rules/no-use-v-else-with-v-for.js       | 5 -----
 tests/lib/rules/no-use-v-else-with-v-for.js | 3 ---
 2 files changed, 8 deletions(-)

diff --git a/lib/rules/no-use-v-else-with-v-for.js b/lib/rules/no-use-v-else-with-v-for.js
index a3e0244b7..dd6dec41c 100644
--- a/lib/rules/no-use-v-else-with-v-for.js
+++ b/lib/rules/no-use-v-else-with-v-for.js
@@ -1,8 +1,3 @@
-/**
- * @author Yosuke Ota
- *
- * Style guide: https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for
- */
 'use strict'
 
 const { defineTemplateBodyVisitor, hasDirective } = require('../utils')
diff --git a/tests/lib/rules/no-use-v-else-with-v-for.js b/tests/lib/rules/no-use-v-else-with-v-for.js
index 7fe54df1c..8778cc125 100644
--- a/tests/lib/rules/no-use-v-else-with-v-for.js
+++ b/tests/lib/rules/no-use-v-else-with-v-for.js
@@ -1,6 +1,3 @@
-/**
- * @author Yosuke Ota
- */
 'use strict'
 
 const RuleTester = require('eslint').RuleTester