Interesting Reactivity/Model-Binding Issue - Why this is happening? #4442
-
|
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> |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
What exactly doesn't work? |
Beta Was this translation helpful? Give feedback.
-
|
Oh, I see. Yeah, so the issue is that the |
Beta Was this translation helpful? Give feedback.
-
|
Got it, thanks. |
Beta Was this translation helpful? Give feedback.
Oh, I see. Yeah, so the issue is that the
productinthis.productis referring to the inner scopesproductsincethisrefers to the scope of the expression that calls the function, not the local one to where that method is defined.