Interesting Reactivity/Model-Binding Issue - Why this is happening? #4442

hasinhayder · 2024-11-22T21:58:59Z

hasinhayder
Nov 22, 2024

Please check the following code - the model binding doesn't work! Check by clicking the edit button beside each product

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine Bug</title>
    <script src="//unpkg.com/alpinejs" defer></script>
    <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
</head>

<body>
    <h1>Interesting Alpine Reactivity Issue/Bug</h1>
    <div x-data="store">
        <template x-for="product in products" :key="product.name">
            <p>
                <span x-text="product.name"></span> - <span x-text="product.price"></span>
                <button @click="editProduct(product)">Edit</button>
            </p>

        </template>
        <div>
            <h2>Model Binding</h2>
            <label for="productName">Product Name:</label>
            <input type="text" id="productName" x-model="product.name"><br>
            <label for="productPrice">Product Price:</label>
            <input type="text" id="productPrice" x-model="product.price"><br>
            <button @click="_product = {}">Clear</button>

        </div>
    </div>
    <script>
        const store = {
            product: {},
            products: [
                { name: 'Product 1', price: 100 },
                { name: 'Product 2', price: 200 },
                { name: 'Product 3', price: 300 },
            ],
            editProduct(product) {
                this.product =  { ...product }
            }
        }
    </script>

</body>

</html>

However, if I replace store.product with store._product (or product in the for loop) - model binding works perfectly fine as shown in the following example. Any idea why this is happening?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine Bug</title>
    <script src="//unpkg.com/alpinejs" defer></script>
    <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
</head>

<body>
    <h1>Interesting Alpine Reactivity Issue/Bug</h1>
    <div x-data="store">
        <template x-for="product in products" :key="product.name">
            <p>
                <span x-text="product.name"></span> - <span x-text="product.price"></span>
                <button @click="editProduct(product)">Edit</button>
            </p>

        </template>
        <div>
            <h2>Model Binding</h2>
            <label for="productName">Product Name:</label>
            <input type="text" id="productName" x-model="_product.name"><br>
            <label for="productPrice">Product Price:</label>
            <input type="text" id="productPrice" x-model="_product.price"><br>
            <button @click="_product = {}">Clear</button>

        </div>
    </div>
    <script>
        const store = {
            _product: {},
            products: [
                { name: 'Product 1', price: 100 },
                { name: 'Product 2', price: 200 },
                { name: 'Product 3', price: 300 },
            ],
            editProduct(product) {
                this._product = { ...product }
            }
        }
    </script>

</body>

</html>

ekwoka · 2024-11-23T14:24:37Z

ekwoka
Nov 23, 2024

What exactly doesn't work?

0 replies

ekwoka · 2024-11-23T14:27:51Z

ekwoka
Nov 23, 2024

Oh, I see. Yeah, so the issue is that the product in this.product is referring to the inner scopes product since this refers to the scope of the expression that calls the function, not the local one to where that method is defined.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Interesting Reactivity/Model-Binding Issue - Why this is happening? #4442

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Interesting Reactivity/Model-Binding Issue - Why this is happening? #4442

hasinhayder Nov 22, 2024

Replies: 2 comments

ekwoka Nov 23, 2024

ekwoka Nov 23, 2024

hasinhayder
Nov 22, 2024

ekwoka
Nov 23, 2024

ekwoka
Nov 23, 2024