如何在 Vue.js 中计算部分值和总值？

Question

我从 Vue.js 开始，我不知道如何计算 v-for 显示中的部分值和总值。

我从具有下一个结构的 JSON 中获取一些信息：

[saldos]
  [bank]
    [data]
      [account]
        - name
        - balance
      [account]
        - name
        - balance
    [meta]
      - info
  [bank]
    [data]
      [account]
        - name
        - balance
      [account]
        - name
        - balance
    [meta]
      - info

每个银行可以是 0 个账户、1 个账户或多个账户。

我需要获取每家银行的部分价值（它是同一家银行内所有账户“余额”的总和）和总值（它是之前为每家银行计算的所有部分价值的总和）

我的 Vue.js 文件是：

var saldo = new Vue({
    el: "#listasaldos",
    data: {
        saldos:[],
    },
    created: function(){
        console.log("Cargando ...");
        this.get_saldos();
    },

    methods:{
        get_saldos: function(){
            fetch("./api.php?action=saldosapi")
            .then(response=>response.json())
            .then(json=>{this.saldos=json.saldos})
        }
    }
});

我的 HTML 文件是：

<div id="listasaldos">
    <h1>Title</h1>
    <h2>{{totalValue}}</h2>

    <div v-for="bank in saldos">

      <h3>{{partialValue}}</h3>

      <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Balance</th>
        </tr>
      </thead>
      <tbody v-for="account in bank.data">
        <tr> {{account.name}}</tr>
        <tr> {{account.balance}}</tr>
      </tbody>
      </table>

    </div>
</div>

我该怎么做？

谢谢！

Answer 1

对于saldos 总数，您可以添加computed 属性并使用reduce 来计算总数：

computed: {
    totalValue() {
      return this.saldos.map(({data}) => data).flat().reduce((a, b) => a + b.balance, 0);
    }
}

我不熟悉如何在循环中添加vue 计算属性。根据this answer，您要么必须为每个bank 创建一个组件，要么在methods 内添加一个名为getBankTotal 的函数：

getBankTotal: function(bank){
   return bank.data.reduce((a, b) => a + b.balance, 0)
}

并在您的 HTML 中使用它：

<h3>{{getBankTotal(bank)}}</h3>

这是一个有效的 sn-p： （我之前没有使用过vue。所以，如果有任何语法或模式错误，请纠正我）

var saldo = new Vue({
  el: "#listasaldos",
  data: {
    saldos: [],
  },
  created: function() {
    this.get_saldos();
  },
  methods: {
    getBankTotal: function(bank) {
      return bank.data.reduce((a, b) => a + b.balance, 0)
    },
    get_saldos: function() {
      this.saldos = [{
        data: [{
          name: "a/c 1",
          balance: 100
        }]
      }, {
        data: [{
          name: "a/c 2",
          balance: 300
        }, {
          name: "a/c 3",
          balance: 400
        }]
      }]
    }
  },
  computed: {
    totalValue() {
      return this.saldos.map(({data}) => data).flat().reduce((a, b) => a + b.balance, 0);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="listasaldos">
  <h1>Title</h1>
  <h2>Total Value: {{totalValue}}</h2>

  <div v-for="bank in saldos">

    <h3>Partial Value: {{getBankTotal(bank)}}</h3>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Balance</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="account in bank.data">
          <td>{{account.name}}</td>
          <td>{{account.balance}}</td>
        </tr>
      </tbody>
    </table>
    <hr>
  </div>
</div>