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

Posted 2023-02-23

【中文标题】如何在 Vue.js 中计算部分值和总值？

【英文标题】：How to calculate partial value and total value in Vue.js?

【发布时间】：2019-05-23 20:03:42

【问题描述】：

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

我该怎么做？

谢谢！

【参考方案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>