fix(compiler-dom): stringifyStatic should remove attribute bindings with `null` value...

fix #3475

diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
index 7918df9a61045cde20cd485e9055d671bfacd7e6..612f4f0138a94a6a04b11d6b53cf63799ef49951 100644 (file)
--- 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
index 7e4c66ad8cd8d2811b6e097d266268c0a165ad8f..c3e8d9419b98a0205ca3c13b055383bd730ef002 100644 (file)
--- 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) {