fix(compiler-core): generate incremental keys for v-if/else-if/else c…

…hains (#1589)

fix #1587

packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap

@@ -14,6 +14,46 @@ return function render(_ctx, _cache) {
 }"
 `;
 
+exports[`compiler: v-if codegen increasing key: v-if + v-else-if + v-else 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+ with (_ctx) {
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
+
+ return (_openBlock(), _createBlock(_Fragment, null, [
+ ok
+ ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
+ : (_openBlock(), _createBlock(\\"p\\", { key: 1 })),
+ another
+ ? (_openBlock(), _createBlock(\\"div\\", { key: 2 }))
+ : orNot
+ ? (_openBlock(), _createBlock(\\"p\\", { key: 3 }))
+ : (_openBlock(), _createBlock(\\"p\\", { key: 4 }))
+ ], 64 /* STABLE_FRAGMENT */))
+ }
+}"
+`;
+
+exports[`compiler: v-if codegen multiple v-if that are sibling nodes should have different keys 1`] = `
+"const _Vue = Vue
+
+return function render(_ctx, _cache) {
+ with (_ctx) {
+ const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
+
+ return (_openBlock(), _createBlock(_Fragment, null, [
+ ok
+ ? (_openBlock(), _createBlock(\\"div\\", { key: 0 }))
+ : _createCommentVNode(\\"v-if\\", true),
+ orNot
+ ? (_openBlock(), _createBlock(\\"p\\", { key: 1 }))
+ : _createCommentVNode(\\"v-if\\", true)
+ ], 64 /* STABLE_FRAGMENT */))
+ }
+}"
+`;
+
 exports[`compiler: v-if codegen template v-if 1`] = `
 "const _Vue = Vue
 

packages/compiler-core/__tests__/transforms/vIf.spec.ts

@@ -29,16 +29,19 @@ import { createObjectMatcher } from '../testUtils'
 function parseWithIfTransform(
  template: string,
  options: CompilerOptions = {},
- returnIndex: number = 0
+ returnIndex: number = 0,
+ childrenLen: number = 1
 ) {
  const ast = parse(template, options)
  transform(ast, {
  nodeTransforms: [transformIf, transformSlotOutlet, transformElement],
  ...options
  })
  if (!options.onError) {
- expect(ast.children.length).toBe(1)
- expect(ast.children[0].type).toBe(NodeTypes.IF)
+ expect(ast.children.length).toBe(childrenLen)
+ for (let i = 0; i < childrenLen; i++) {
+ expect(ast.children[i].type).toBe(NodeTypes.IF)
+ }
  }
  return {
  root: ast,
@@ -459,6 +462,68 @@ describe('compiler: v-if', () => {
  expect(generate(root).code).toMatchSnapshot()
  })
 
+ test('multiple v-if that are sibling nodes should have different keys', () => {
+ const { root } = parseWithIfTransform(
+ `<div v-if="ok"/><p v-if="orNot"/>`,
+ {},
+ 0 /* returnIndex, just give the default value */,
+ 2 /* childrenLen */
+ )
+
+ const ifNode = root.children[0] as IfNode & {
+ codegenNode: IfConditionalExpression
+ }
+ expect(ifNode.codegenNode.consequent).toMatchObject({
+ tag: `"div"`,
+ props: createObjectMatcher({ key: `[0]` })
+ })
+ const ifNode2 = root.children[1] as IfNode & {
+ codegenNode: IfConditionalExpression
+ }
+ expect(ifNode2.codegenNode.consequent).toMatchObject({
+ tag: `"p"`,
+ props: createObjectMatcher({ key: `[1]` })
+ })
+ expect(generate(root).code).toMatchSnapshot()
+ })
+
+ test('increasing key: v-if + v-else-if + v-else', () => {
+ const { root } = parseWithIfTransform(
+ `<div v-if="ok"/><p v-else/><div v-if="another"/><p v-else-if="orNot"/><p v-else/>`,
+ {},
+ 0 /* returnIndex, just give the default value */,
+ 2 /* childrenLen */
+ )
+ const ifNode = root.children[0] as IfNode & {
+ codegenNode: IfConditionalExpression
+ }
+ expect(ifNode.codegenNode.consequent).toMatchObject({
+ tag: `"div"`,
+ props: createObjectMatcher({ key: `[0]` })
+ })
+ expect(ifNode.codegenNode.alternate).toMatchObject({
+ tag: `"p"`,
+ props: createObjectMatcher({ key: `[1]` })
+ })
+ const ifNode2 = root.children[1] as IfNode & {
+ codegenNode: IfConditionalExpression
+ }
+ expect(ifNode2.codegenNode.consequent).toMatchObject({
+ tag: `"div"`,
+ props: createObjectMatcher({ key: `[2]` })
+ })
+ const branch = ifNode2.codegenNode.alternate as IfConditionalExpression
+ expect(branch.consequent).toMatchObject({
+ tag: `"p"`,
+ props: createObjectMatcher({ key: `[3]` })
+ })
+ expect(branch.alternate).toMatchObject({
+ tag: `"p"`,
+ props: createObjectMatcher({ key: `[4]` })
+ })
+ expect(generate(root).code).toMatchSnapshot()
+ })
+
  test('key injection (only v-bind)', () => {
  const {
  node: { codegenNode }

packages/compiler-core/src/transforms/vIf.ts

@@ -37,13 +37,26 @@ export const transformIf = createStructuralDirectiveTransform(
  /^(if|else|else-if)$/,
  (node, dir, context) => {
  return processIf(node, dir, context, (ifNode, branch, isRoot) => {
+ // #1587: We need to dynamically increment the key based on the current
+ // node's sibling nodes, since chained v-if/else branches are
+ // rendered at the same depth
+ const siblings = context.parent!.children
+ let i = siblings.indexOf(ifNode)
+ let key = 0
+ while (i-- >= 0) {
+ const sibling = siblings[i]
+ if (sibling && sibling.type === NodeTypes.IF) {
+ key += sibling.branches.length
+ }
+ }
+
  // Exit callback. Complete the codegenNode when all children have been
  // transformed.
  return () => {
  if (isRoot) {
  ifNode.codegenNode = createCodegenNodeForBranch(
  branch,
- 0,
+ key,
  context
  ) as IfConditionalExpression
  } else {
@@ -57,7 +70,7 @@ export const transformIf = createStructuralDirectiveTransform(
  }
  parentCondition.alternate = createCodegenNodeForBranch(
  branch,
- ifNode.branches.length - 1,
+ key + ifNode.branches.length - 1,
  context
  )
  }