Как рассчитать частичное значение и общее значение в Vue.js? - PullRequest
Новая
       6

Как рассчитать частичное значение и общее значение в Vue.js?

0 голосов
/ 24 декабря 2018

Я начинаю с 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 счет или более счетов.

Мне нужно получить частичную стоимость каждого банка (это сумма всех счетов«Баланс» внутри одного и того же банка) и общая стоимость (это сумма всех частичных значений, ранее рассчитанных для каждого банка)

Файл My 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 Ответ

0 голосов
/ 24 декабря 2018

В сумме saldos можно добавить свойство computed и использовать reduce для расчета суммы: 

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

IЯ не знаю, как можно было бы добавить vue вычисленные свойства внутри цикла.Согласно этому ответу вы должны либо создать компонент для каждого bank, либо добавить функцию с именем getBankTotal внутри methods: 

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

и использовать ее в своем HTML: 

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

Вот рабочий фрагмент: (Я раньше не использовал 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>
...