如何使用Alpine.js实现grandTotal累计总和的计算与获取

原代码问题梳理 #

• 数据结构设计错误：rows字段存储的是字符串而非每行独立的结构化数据，所有行共用全局的qty/rate/total变量，无法存储多行独立数值
• 指令使用错误：input元素使用x-text无效，x-for未加必填的key属性
• 计算逻辑缺失：没有定义所有行小计累加为grandTotal的响应式逻辑

正确实现代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <title>Alpine 累计总和计算</title>
</head>
<body>
<ul x-data="{
  rows: [
    { qty: 0, rate: 0, total: 0 },
    { qty: 0, rate: 0, total: 0 },
    { qty: 0, rate: 0, total: 0 }
  ],
  get grandTotal() {
    return this.rows.reduce((sum, row) => sum + Number(row.total || 0), 0)
  }
}">
  <template x-for="(row, index) in rows" :key="index">
    <li>
      <input type="number" x-model.number="row.qty" name="qty[]" placeholder="数量">
      <input type="number" x-model.number="row.rate" name="rate[]" placeholder="单价">
      <input type="number" x-model.number="row.total" name="total[]" placeholder="小计" readonly x-effect="row.total = row.qty * row.rate">
    </li>
  </template>
  <li>
    累计总和：<input type="number" x-model.number="grandTotal" name="grandTotal" readonly>
  </li>
</ul>
</body>
</html>

核心逻辑说明 #

• 结构化存储每行数据：将每行的数量、单价、小计都作为独立对象存在rows数组中，各行数据互不干扰
• 行内小计自动计算：通过x-effect监听当前行的数量和单价变化，自动更新该行小计值
• 累计总和响应式计算：通过getter定义grandTotal计算属性，使用数组reduce方法累加所有行的小计值，任意行数据变动时grandTotal会自动更新
• 只读属性设置：小计和累计总和的输入框设为只读，避免用户手动修改导致数据不一致

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