How to change Alpinejs component params by javascript? - alpine.js

Question

I have an alpineJS component that data inside of init() function.
Inside of this component, I am adding the item component dynamically. Dynamically added item property is working fine. But how can I sum all item-total values and get them into my sub_total field? sample code attached below.
I have tried the update() function onkeyup of the item price and quantity change.
But not working.
<div x-data="init()">
<div x-data="item()">
<input type="text" name="price" id="price" x-model="price" x-on:keyup="update()">
<input type="text" name="qty" id="qty" x-model="qty" x-on:keyup="update()">
<input type="text" class="item-total" name="total" id="total" x-model="total()">
</div>
<div x-data="item()">
<input type="text" name="price" id="price" x-model="price" x-on:keyup="update()">
<input type="text" name="qty" id="qty" x-model="qty" x-on:keyup="update()">
<input type="text" class="item-total" name="total" id="total" x-model="total()">
</div>
<input type="text" name="sub_total" id="sub_total" x-model="sub_total">
<input type="text" name="vat" id="vat" x-model="vat">
<input type="text" name="total" id="total" x-model="total()">
<div>
<script>
function update() {
let sub_total = 0;
document.querySelectorAll(".item-total").forEach(function(el) {
sub_total += parseFloat(el.value);
});
console.log(sub_total);
document.getElementById("sub_total").value = sub_total;
return sub_total;
}
function item() {
price: 0,
qty: 0,
total() {
return this.price * this.qty;
}
}
function init() {
sub_total: 0,
tax: 0,
total() {
return this.sub_total + this.tax;
}
}
</script>

Answer 1

I would suggest using an object inside your outer AlpineJS component instead of nesting components. Communication across components is a little tricky and can be done best via custom events, but in your case I don't see why that's even needed.
Here is a quick and dirty working example of what I would probably try:
window.table = function() {
return {
items: [
{ price: 0, qty: 1, total: 0 },
{ price: 0, qty: 1, total: 0 },
],
vat: 0,
sub_total: 0,
total() {
return this.items.reduce((carry, val) => carry + Number(val.total), 0);
},
subtotal() {
return this.items.reduce((carry, val) => carry + Number(val.price), 0);
},
}
}
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"></script>
<div x-data="table()">
<template x-for="item in items">
<div>
<input type="text" name="price" x-model="item.price" #input="item.total = item.price * item.qty">
<input type="text" name="qty" x-model="item.qty" #input="item.total = item.price * item.qty">
<input type="text" class="item-total" name="total" x-model="item.total">
</div>
</template>
<input type="text" name="sub_total" id="sub_total" :value="subtotal()" readonly>
<input type="text" name="vat" id="vat" x-model="vat">
<input type="text" name="total" id="total" :value="total()" readonly>
</div>
I left your vat model in but don't do anything with it, as I don't see that you have the taxes implemented yet. But the working example should be a good starting point for you.
Please note that your id attributes should be unique. You should not have multiple inputs with id="price" etc. in your document. Also you have not initialized the Alpine component JS correctly, the function should return an object, you have been throwing your code right into the function, which will cause errors.