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

Question

在 Alpine 迭代中，可以使用当前值和先前值求和以在 table 中生成新列吗？

在下面的代码中：


    <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>

我需要在我的 table.

的新栏中显示余额（当前 .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>

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

How can i do a iteration whit last value in Alpine JS?

javascript

alpine.js