ソースを参照

Fix static attribute binding in x-bind object (#2256)

* Fix static attribute binding in x-bind object

* Remove duplicated test
Caleb Porzio 3 年 前
コミット
36eb3013a8

+ 10 - 4
packages/alpinejs/src/directives/x-bind.js

@@ -31,12 +31,18 @@ function applyBindingsObject(el, expression, original, effect) {
         getBindings(bindings => {
             let attributes = Object.entries(bindings).map(([name, value]) => ({ name, value }))
 
+            let staticAttributes = attributesOnly(attributes)
+            
             // Handle binding normal HTML attributes (non-Alpine directives).
-            attributesOnly(attributes).forEach(({ name, value }, index) => {
-                attributes[index] = {
-                    name: `x-bind:${name}`,
-                    value: `"${value}"`,
+            attributes = attributes.map(attribute => {
+                if (staticAttributes.find(attr => attr.name === attribute.name)) {
+                    return {
+                        name: `x-bind:${attribute.name}`,
+                        value: `"${attribute.value}"`,
+                    }
                 }
+
+                return attribute
             })
 
             directives(el, attributes, original).map(handle => {

+ 11 - 0
tests/cypress/integration/directives/x-bind.spec.js

@@ -317,6 +317,17 @@ test('x-bind object syntax supports normal HTML attributes',
     }
 )
 
+test('x-bind object syntax supports normal HTML attributes mixed in with dynamic ones',
+    html`
+        <span x-data x-bind="{ 'x-bind:bob'() { return 'lob'; }, foo: 'bar', 'x-bind:bab'() { return 'lab' } }"></span>
+    `,
+    ({ get }) => {
+        get('span').should(haveAttribute('foo', 'bar'))
+        get('span').should(haveAttribute('bob', 'lob'))
+        get('span').should(haveAttribute('bab', 'lab'))
+    }
+)
+
 test('x-bind object syntax supports x-for',
     html`
         <script>