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) {