Merge pull request #1498 from ryangjchandler/fix/binding-undefined-value

fix: binding undefined nested value

packages/alpinejs/src/directives/x-bind.js

@@ -13,6 +13,9 @@ directive('bind', (el, { value, modifiers, expression, original }, { effect }) =
     let evaluate = evaluateLater(el, expression)
 
     effect(() => evaluate(result => {
+        // If nested object key is undefined, set the default value to empty string.
+        if (result === undefined && expression.match(/\./)) result = ''
+
         mutateDom(() => bind(el, value, result, modifiers))
     }))
 })

tests/cypress/integration/directives/x-bind.spec.js

@@ -9,6 +9,15 @@ test('sets attribute bindings on initialize',
     ({ get }) => get('span').should(haveAttribute('foo', 'bar'))
 )
 
+test('sets undefined nested keys to empty string',
+    html`
+        <div x-data="{ nested: {} }">
+            <input x-bind:value="nested.field">
+        </div>
+    `,
+    ({ get }) => get('input').should(haveAttribute('value', ''))
+)
+
 test('style attribute bindings are added by string syntax',
     html`
         <div x-data="{ initialClass: 'foo' }">