fix(compiler-dom): remove v-bind boolean attribute with literal false value when...

fix #6617

diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
index c737071a827150c5fa23065becf5bd47e31a45c0..bedec9fc00a9b8ba163fb489a69f57cc2d007202 100644 (file)
--- a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -410,6 +410,29 @@ describe('stringify static html', () => {
     })
   })
 
+  // #6617
+  test('should remove boolean attribute for `false`', () => {
+    const { ast } = compileWithStringify(
+      `<button :disabled="false">enable</button>${repeat(
+        `<div></div>`,
+        StringifyThresholds.NODE_COUNT
+      )}`
+    )
+    expect(ast.hoists[0]).toMatchObject({
+      type: NodeTypes.JS_CALL_EXPRESSION,
+      callee: CREATE_STATIC,
+      arguments: [
+        JSON.stringify(
+          `<button>enable</button>${repeat(
+            `<div></div>`,
+            StringifyThresholds.NODE_COUNT
+          )}`
+        ),
+        '21'
+      ]
+    })
+  })
+
   test('should stringify svg', () => {
     const svg = `<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">`
     const repeated = `<rect width="50" height="50" fill="#C4C4C4"></rect>`

diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts
index a268d86cd07a2205d8afcc8ce7c78e4ad41c450f..d3f58bdb9dae75ce315381615e5f32710782a7fe 100644 (file)
--- a/packages/compiler-dom/src/transforms/stringifyStatic.ts
+++ b/packages/compiler-dom/src/transforms/stringifyStatic.ts
@@ -28,7 +28,8 @@ import {
   normalizeStyle,
   stringifyStyle,
   makeMap,
-  isKnownSvgAttr
+  isKnownSvgAttr,
+  isBooleanAttr
 } from '@vue/shared'
 import { DOMNamespaces } from '../parserOptions'
 
@@ -298,6 +299,13 @@ function stringifyElement(
           }="__VUE_EXP_START__${exp.content}__VUE_EXP_END__"`
           continue
         }
+        // #6568
+        if (
+          isBooleanAttr((p.arg as SimpleExpressionNode).content) &&
+          exp.content === 'false'
+        ) {
+          continue
+        }
         // constant v-bind, e.g. :foo="1"
         let evaluated = evaluateConstant(exp)
         if (evaluated != null) {