Alpine.js问题：如何将计算字段值同步回数据模型？

问题核心在于：你用x-bind:value实现了计算值的前端显示，但这个指令是单向绑定——只把数据渲染到DOM，不会反向更新数据模型；同时只读表单字段（readonly/disabled）不会触发input/change事件，所以x-model、@input、@change这些依赖事件触发的逻辑自然无效。

针对x-for动态生成的数组场景，最便捷的处理方式是用**x-effect监听依赖字段变化，手动同步计算值到数据模型**，具体步骤如下：

1. 给每个数组项添加存储计算值的属性（比如你的示例里对应总价的字段）；
2. 在x-for的循环上下文内，用x-effect监听计算依赖的字段（比如数量、单价），一旦变化就重新计算并赋值给数据模型里的计算字段；
3. 计算字段的输入框用x-bind:value绑定数据模型里的计算值，并设置readonly防止用户编辑。

举个具体的代码示例（对应你的场景）：

<div x-data="{
  items: [
    { qty: 2, price: 5, total: 10 },
    { qty: 3, price: 4, total: 12 }
  ],
  calculateTotal(item) {
    // 这里可替换为你的复杂计算逻辑
    return item.qty * item.price;
  }
}">
  <template x-for="(item, idx) in items" :key="idx">
    <div class="item">
      <input type="number" x-model="item.qty" placeholder="数量">
      <input type="number" x-model="item.price" placeholder="单价">
      <!-- 只读计算字段，绑定数据模型里的total -->
      <input type="number" x-bind:value="item.total" readonly placeholder="总价">
      <!-- 监听依赖字段变化，同步计算值到数据模型 -->
      <x-effect="item.total = calculateTotal(item)"></x-effect>
    </div>
  </template>
  <button @click="items.push({ qty: 1, price: 0, total: 0 })">添加行</button>
</div>

为什么这个方法可行？

• x-effect会自动追踪item.qty和item.price的变化，只要这两个值改变，就会重新执行计算逻辑并更新item.total；
• 数据模型里的item.total更新后，x-bind:value会自动把最新值渲染到输入框，实现双向同步；
• 不需要全局维护计算逻辑，每个循环项的计算都独立处理，完全适配x-for的动态场景。

内容的提问来源于stack exchange，提问作者Jan Zikmund