alpine js如何总计x-for项目

Question

认为这将非常简单，但我如何遍历模板 x-for items - 进行总和计算以在最后输出.. [或者即使我已经在 sourcedata 中有总数 - 如何输出作为最后一行？即如何 x-if 最后一行]

例如

 <template x-for="catalogxbdata in catalogxbdatax" :key="catalogxbdata.Part">
      <div class="table-row">
          <Div class="table-cell"></div>
          <Div class="table-cell" x-text="catalogxbdata.Price"></div>    
          <Div class="table-cell" x-text="?total here"></div> <--- but only if last row
     </Div>
    </template>
    <Div class="table-cell"> </div>
    <Div class="table-cell" x-text="?total here"></div> <-- or here, but this is outside of template

Answer 1

发布答案以防有人有相同的..

<script>
function setVals() {

  return {
    total_c1:0,
    total_c2:0,
    settotalifindata(valx)
    {
    this.total_c1=valx;
    },
    //or
    settotal(valx)
    {
    this.totalc2+=valx;
    }
}
}
</script>

<div id="a0" class="p-1" x-data="setVals()">

<template x-for="catalogxbdata in catalogxbdatax" :key="catalogxbdata.Part">
      <div class="table-row">
          <Div class="table-cell"></div>
          <Div class="table-cell" x-text="catalogxbdata.Price"></div> 
          <div class="table-cell" x-show="false" x-text="settotalifindata(catalogxbdata.total)"></div>   
          <div class="table-cell" x-show="false" x-text="settotal(catalogxbdata.Price)"></div>   

          <Div class="table-cell" x-text="total_c1"></div> <--- but only if last row
     </Div>
    </template>
    <Div class="table-cell"> </div>
    <Div class="table-cell" x-text="total_c2"></div>
</div>