如何通过 javascript 更改 Alpinejs 组件参数？

Question

我有一个 alpineJS 组件，它在 init() 函数中存储数据。 在这个组件内部，我动态添加了 item 组件。动态添加的项目属性工作正常。但是我怎样才能将所有项目总计值相加并将它们放入我的 sub_total 字段中？下面附上示例代码。

我尝试了商品价格和数量变化的update()函数onkeyup。 但不工作。

<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

我建议在你的外部 AlpineJS 组件中使用一个对象，而不是嵌套组件。跨组件的通信有点棘手，可以通过自定义事件最好地完成，但在你的情况下，我不明白为什么需要这样做。

这是我可能会尝试的一个快速而肮脏的工作示例：

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>

我保留了您的增值税模型，但没有对其进行任何处理，因为我没有看到您已经实施了税收。但工作示例应该是您的一个很好的起点。

请注意，您的id 属性应该是唯一的。您的文档中不应有多个带有id="price" 等的输入。另外你没有正确初始化Alpine组件JS，函数应该返回一个对象，你一直在把代码直接扔到函数中，这会导致错误。