如何在 Alpine JS 中对最后一个值进行迭代？

Question

是否可以在 Alpine 迭代中使用当前值和前一个值求和以在表中生成一个新列？

在下面的代码中：

    <template x-for="movimento in movimentos" :key="movimento.id">
      <tr>  
         <td class="border-dashed border-t border-gray-200 text-center Data">
            <span class="text-gray-700 px-1 py-0" 
            x-text="movimento.data"></span>
         </td>
         <td class="border-dashed border-t border-gray-200 text-right Valor">
            <span class="text-gray-700 px-1 py-0" 
            x-text="movimento.valor"></span>
          </td>
          <td class="border-dashed border-t border-gray-200 text-center Tipo">
            <span class="text-gray-700 px-1 py-0" 
            x-text="movimento.tipo"></span>
          </td> 
         <td class="border-dashed border-t border-gray-200 Descricao">
            <span class="text-gray-700 px-1 py-0 items-center" 
            x-text="movimento.descricao"></span>
         </td> 
         <td class="border-dashed border-t border-gray-200 Categoria">
          <span class="text-gray-700 px-1 py-0 items-center" 
          x-text="movimento.categoria"></span>
        </td>
        <td class="border-dashed border-t border-gray-200 Conta">
          <span class="text-gray-700 px-1 py-0 items-center" 
          x-text="movimento.conta"></span>
        </td> 
        <td class="border-dashed border-t border-gray-200 Caixa">
          <span class="text-gray-700 px-1 py-0 items-center" 
          x-text="movimento.caixa"></span>
        </td>                                                             
         <td class="border-dashed border-t border-gray-200 Empreendimento">
           <span class="text-gray-700 px-1 py-0 flex items-center" 
           x-text="movimento.empreendimento"></span>
         </td>                              
      </tr>                           
    </template>

代码后：

<td class="border-dashed border-t border-gray-200 text-right Valor">
    <span class="text-gray-700 px-1 py-0" 
        x-text="movimento.valor"></span>
</td>

我需要在表格的新列中显示余额（当前 .valor + 最后一个 .valor）。

这可能吗？

谢谢大家。

Answer 1

x-for 可以访问当前项目的索引，所以我们可以使用collection[index - 1] 访问上一个项目

<template x-for="(movimento, index) in movimentos" :key="movimento.id">
  <tr>
    <td>Current: <span x-text="movimento.valor"></span></td>
    <td>Previous: <span x-text="movimento[index - 1] && movimento[index - 1].valor"></span></td>
    <td>Sum: <span x-text="movimento.valor + (movimento[index - 1] && movimento[index - 1].valor)"></span></td>
  </tr>
</template>