vue for循环中的saldo计数器给出无限循环错误

Question

（有一个 PD）

我有一个显示帐户变动的页面。 在数据库中有日期和金额。 每个月初都有一张单独的桌子保存萨尔多。 此外，该表可按开始和结束日期进行过滤

来自银行帐户移动的过滤条目具有日期和金额，这工作正常。 我现在正在尝试将其与帐户-saldo 融合。 开始很简单：从 DB 中获取并显示 startSaldo

在渲染端，我有一个 v-for 循环遍历每个动作 奇怪的是我在一个意想不到的方法上得到了一个无限循环

渲染：

<tr v-for="movimiento in this.filteredEntries">
                ...

                <td>{{calculateSaldo(movimiento.cobro_id,movimiento.monto)}}</td>
                ...
</tr>

saldo 是一个简单的属性（不是计算出来的），目前以 0 开头，仅在方法中使用

这就是方法

calculateSaldo(cobro_id,monto){
            //cobro_id and monto are 
            return 0; // <<<< without this I get the infinite loop error. But why?
            if (cobro_id){
                this.saldo=this.saldo+parseInt(monto);
            } else {
                this.saldo= this.saldo-parseInt(monto);
            }
            console.log(this.saldo);
            // <<< a return 0 here produces also an infinite loop error
            return this.saldo;
        },

我不知道该往哪里看……

PD：经过更多测试后，显然，一旦我为 this.saldo 重新分配了一个值，就会启动重新渲染。如何克服它？

PPD：显然，在到达最后一个（按日期）过滤的实体后会发生重新渲染

Answer 1

如here 所述，当您在状态渲染中重新分配一个值时触发并导致无限循环。

所以我尝试重新创建您的组件的基本版本，我认为您可以在 filteredEntries 计算属性上解决此问题。

computed: {
    filteredEntries() {
      let lastSaldo = this.saldo;
      return this.entries.map((item) => {
        if (item.cobro_id) {
          lastSaldo = parseInt(lastSaldo) + parseInt(item.monto);
        } else {
          lastSaldo = parseInt(lastSaldo) - parseInt(item.monto);
        }
        item.saldo = lastSaldo;
        return item;
      });
    },
  },

我重新创建您的组件示例的完整代码：

<template>
  <div>
    <table>
      <tr v-for="(movimiento, index) in this.filteredEntries" :key="index">
        <td>{{ movimiento.saldo }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      saldo: 0,
      entries: [
        {
          cobro_id: null,
          monto: 5,
        },
        {
          cobro_id: 2,
          monto: 10,
        },
        {
          cobro_id: null,
          monto: 5,
        },
        {
          cobro_id: 1,
          monto: 25,
        },
      ],
    };
  },
  computed: {
    filteredEntries() {
      let lastSaldo = this.saldo;
      return this.entries.map((item) => {
        if (item.cobro_id) {
          lastSaldo = parseInt(lastSaldo) + parseInt(item.monto);
        } else {
          lastSaldo = parseInt(lastSaldo) - parseInt(item.monto);
        }
        item.saldo = lastSaldo;
        return item;
      });
    },
  },
};
</script>