anjanesh/alpine-auto-update-variable-method-1.html

## alpine-auto-update-variable-method-1.html
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>AlpineJS auto update of variable values Method 1</title>
</head>
<body>
<script>
document.addEventListener('alpine:init', () =>
{
    Alpine.store('global_data',
    {
        products:
        [
            {
                name: 'batmobile',
                price_USD: 20,
                price_INR: 1660, // 20 x 83
            },
            {
                name: 'herbie',
                price_USD: 35,
                price_INR: 2905, // 35 x 83
            },
            {
                name: 'delorean',
                price_USD: 51,
                price_INR: 4233, // 51 x 83
            },
        ],

        set priceInINR(p)
        {
            const product = this.products.find(product => product.name === p.name);
            product.price_INR = p.price_USD * 83;
        },
    });
});
</script>

<div x-data="">
    <template x-for="(product, index) in $store.global_data.products">
        <div>
            <span x-text="product.name"></span> :
            <input
                x-model="product.price_USD"
                x-on:input="$store.global_data.priceInINR = product"
            />
            USD =
            <input x-model="product.price_INR" /> INR
        </div>
    </template>
</div>

<script defer src="https://unpkg.com/alpinejs@3.13.1/dist/cdn.min.js"></script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>AlpineJS auto update of variable values Method 1</title>
	</head>
	<body>
	<script>
	document.addEventListener('alpine:init', () =>
	{
	Alpine.store('global_data',
	{
	products:
	[
	{
	name: 'batmobile',
	price_USD: 20,
	price_INR: 1660, // 20 x 83
	},
	{
	name: 'herbie',
	price_USD: 35,
	price_INR: 2905, // 35 x 83
	},
	{
	name: 'delorean',
	price_USD: 51,
	price_INR: 4233, // 51 x 83
	},
	],

	set priceInINR(p)
	{
	const product = this.products.find(product => product.name === p.name);
	product.price_INR = p.price_USD * 83;
	},
	});
	});
	</script>

	<div x-data="">
	<template x-for="(product, index) in $store.global_data.products">
	<div>
	<span x-text="product.name"></span> :
	<input
	x-model="product.price_USD"
	x-on:input="$store.global_data.priceInINR = product"
	/>
	USD =
	<input x-model="product.price_INR" /> INR
	</div>
	</template>
	</div>

	<script defer src="https://unpkg.com/alpinejs@3.13.1/dist/cdn.min.js"></script>
	</body>
	</html>