fix(compiler-core): add check when v-else-if is behind v-else (#4603)

vuejs · Sep 21, 2021 · 5addef8 · 5addef8
1 parent 5aa4255
commit 5addef8
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/packages/compiler-core/__tests__/transforms/vIf.spec.ts b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
@@ -248,7 +248,7 @@ describe('compiler: v-if', () => {
       ])
     })
 
-    test('error on v-else-if missing adjacent v-if', () => {
+    test('error on v-else-if missing adjacent v-if or v-else-if', () => {
       const onError = jest.fn()
 
       const { node: node1 } = parseWithIfTransform(`<div v-else-if="foo"/>`, {
@@ -284,6 +284,21 @@ describe('compiler: v-if', () => {
           loc: node3.loc
         }
       ])
+
+      const {
+        node: { branches }
+      } = parseWithIfTransform(
+        `<div v-if="notOk"/><div v-else/><div v-else-if="ok"/>`,
+        { onError },
+        0
+      )
+
+      expect(onError.mock.calls[3]).toMatchObject([
+        {
+          code: ErrorCodes.X_V_ELSE_NO_ADJACENT_IF,
+          loc: branches[branches.length - 1].loc
+        }
+      ])
     })
 
     test('error on user key', () => {

diff --git a/packages/compiler-core/src/errors.ts b/packages/compiler-core/src/errors.ts
@@ -149,7 +149,7 @@ export const errorMessages: Record<ErrorCodes, string> = {
   // transform errors
   [ErrorCodes.X_V_IF_NO_EXPRESSION]: `v-if/v-else-if is missing expression.`,
   [ErrorCodes.X_V_IF_SAME_KEY]: `v-if/else branches must use unique keys.`,
-  [ErrorCodes.X_V_ELSE_NO_ADJACENT_IF]: `v-else/v-else-if has no adjacent v-if.`,
+  [ErrorCodes.X_V_ELSE_NO_ADJACENT_IF]: `v-else/v-else-if has no adjacent v-if or v-else-if.`,
   [ErrorCodes.X_V_FOR_NO_EXPRESSION]: `v-for is missing expression.`,
   [ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION]: `v-for has invalid expression.`,
   [ErrorCodes.X_V_FOR_TEMPLATE_KEY_PLACEMENT]: `<template v-for> key should be placed on the <template> tag.`,

diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
@@ -145,6 +145,16 @@ export function processIf(
       }
 
       if (sibling && sibling.type === NodeTypes.IF) {
+        // Check if v-else was followed by v-else-if
+        if (
+          dir.name === 'else-if' &&
+          sibling.branches[sibling.branches.length - 1].condition === undefined
+        ) {
+          context.onError(
+            createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc)
+          )
+        }
+
         // move the node to the if node's branches
         context.removeNode()
         const branch = createIfBranch(node, dir)