fix(compiler-dom): stringifyStatic should remove attribute bindings w…

…ith `null` value (#3477) fix #3475
vuejs · Mar 25, 2021 · ca6aa01 · ca6aa01
1 parent 7cf143d
commit ca6aa01
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -294,4 +294,26 @@ describe('stringify static html', () => {
  })
  })
  })
+
+ test('should remove attribute for `null`', () => {
+ const { ast } = compileWithStringify(
+ `<div>${repeat(
+ `<span :title="null"></span>`,
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+ )}</div>`
+ )
+ expect(ast.hoists[0]).toMatchObject({
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: CREATE_STATIC,
+ arguments: [
+ JSON.stringify(
+ `${repeat(
+ `<span></span>`,
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+ )}`
+ ),
+ '5'
+ ]
+ })
+ })
 })
diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts
@@ -264,15 +264,17 @@ function stringifyElement(
  } else if (p.type === NodeTypes.DIRECTIVE && p.name === 'bind') {
  // constant v-bind, e.g. :foo="1"
  let evaluated = evaluateConstant(p.exp as SimpleExpressionNode)
- const arg = p.arg && (p.arg as SimpleExpressionNode).content
- if (arg === 'class') {
- evaluated = normalizeClass(evaluated)
- } else if (arg === 'style') {
- evaluated = stringifyStyle(normalizeStyle(evaluated))
+ if (evaluated != null) {
+ const arg = p.arg && (p.arg as SimpleExpressionNode).content
+ if (arg === 'class') {
+ evaluated = normalizeClass(evaluated)
+ } else if (arg === 'style') {
+ evaluated = stringifyStyle(normalizeStyle(evaluated))
+ }
+ res += ` ${(p.arg as SimpleExpressionNode).content}="${escapeHtml(
+ evaluated
+ )}"`
  }
- res += ` ${(p.arg as SimpleExpressionNode).content}="${escapeHtml(
- evaluated
- )}"`
  }
  }
  if (context.scopeId) {