diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap index aa7fd9b6..c4dd8cbb 100644 --- a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap +++ b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap @@ -389,7 +389,7 @@ return function render() { ? _createBlock(\\"div\\", _hoisted_1, [ _hoisted_2 ]) - : _createCommentVNode()) + : _createCommentVNode(\\"v-if\\", true)) ])) } }" diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap index af3a901b..372b0771 100644 --- a/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap +++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap @@ -161,7 +161,7 @@ return function render() { ? _createBlock(_Fragment, { key: 0 }, _renderList(list, (i) => { return (_openBlock(), _createBlock(\\"div\\")) }), 128 /* UNKEYED_FRAGMENT */) - : _createCommentVNode()) + : _createCommentVNode(\\"v-if\\", true)) } }" `; diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap index 2ae79ffd..498c03d3 100644 --- a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap +++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap @@ -9,7 +9,7 @@ return function render() { return (_openBlock(), ok ? _createBlock(\\"div\\", { key: 0 }) - : _createCommentVNode()) + : _createCommentVNode(\\"v-if\\", true)) } }" `; @@ -27,7 +27,7 @@ return function render() { \\"hello\\", _createVNode(\\"p\\") ]) - : _createCommentVNode()) + : _createCommentVNode(\\"v-if\\", true)) } }" `; @@ -41,7 +41,7 @@ return function render() { return (_openBlock(), ok ? _renderSlot($slots, \\"default\\", { key: 0 }) - : _createCommentVNode()) + : _createCommentVNode(\\"v-if\\", true)) } }" `; @@ -87,7 +87,7 @@ return function render() { ? _createBlock(\\"div\\", { key: 0 }) : orNot ? _createBlock(\\"p\\", { key: 1 }) - : _createCommentVNode()) + : _createCommentVNode(\\"v-if\\", true)) } }" `; @@ -101,7 +101,7 @@ return function render() { return (_openBlock(), ok ? _renderSlot($slots, \\"default\\", { key: 0 }) - : _createCommentVNode()) + : _createCommentVNode(\\"v-if\\", true)) } }" `; diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts index e3da963c..6389d8ea 100644 --- a/packages/compiler-core/src/transforms/vIf.ts +++ b/packages/compiler-core/src/transforms/vIf.ts @@ -152,7 +152,12 @@ function createCodegenNodeForBranch( return createConditionalExpression( branch.condition, createChildrenCodegenNode(branch, index, context), - createCallExpression(context.helper(CREATE_COMMENT)) + // make sure to pass in asBlock: true so that the comment node call + // closes the current block. + createCallExpression(context.helper(CREATE_COMMENT), [ + __DEV__ ? '"v-if"' : '""', + 'true' + ]) ) as IfConditionalExpression } else { return createChildrenCodegenNode(branch, index, context) as BlockCodegenNode diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts index 41c2cd74..ad1d3ad0 100644 --- a/packages/runtime-core/src/vnode.ts +++ b/packages/runtime-core/src/vnode.ts @@ -258,8 +258,15 @@ export function createTextVNode(text: string = ' ', flag: number = 0): VNode { return createVNode(Text, null, text, flag) } -export function createCommentVNode(text: string = ''): VNode { - return createVNode(Comment, null, text) +export function createCommentVNode( + text: string = '', + // when used as the v-else branch, the comment node must be created as a + // block to ensure correct updates. + asBlock: boolean = false +): VNode { + return asBlock + ? createBlock(Comment, null, text) + : createVNode(Comment, null, text) } export function normalizeVNode(child: VNodeChild): VNode {