VueJs / Laravel.Сумма нескольких массивов в разных объектах

Question

Я использую этот код для отображения всех людей, которые у меня есть.

<div class="col-md-3" v-for="person in persons">
</div>   

// Каждый человек является объектом.в каждом объекте есть несколько объектов (деньги даны).Мне нужно вычислить сумму общей суммы (Массив), существующей в этих объектах (Все деньги даны каждому человеку)

// Как бы сказать, все кредиты относительно каждого Человека.

Я использую это для Php, но как мне это сделать с помощью computed?

Код Vuejs:

var app = new Vue({
el: '#app',
data: {
   persons:[],
},
methods: {
getPersons (),
},

Спасибо вам!

Вот образец лиц.несколько объектов, и внутри каждого объекта, usercashfloats с несколькими объектами, мне нужно рассчитать сумму.(Количество существует в каждом из этих объектов)

Answer 1

Это может быть так:

<div class="col-md-3" v-for="person in preparedPersons">
</div> 

var app = new Vue({
el: '#app',
data: {
   persons:[],
},
computed: {
   preparedPersons : function() {
      return this.persons.map(
         (p) => {
             return {
                   ...p, 
                   sumOfAmount: p.usercashfloat.reduce(
                       (acc, cur) => acc.amount + cur.amount
                   )
              };
          }
      )
   }
},
methods: {
getPersons (),
},

Answer 2

Ваше свойство computed должно иметь вид:

  computed:{
      personsWithAount(){

             const reducer = (accumulator, currentValue) => accumulator.amount + currentValue.amount;
              return  this.persons.map((pers)=>{
                      let p=pers;
                      if(pers.usercashfloat.length==0){

                       p.totalAmount=0;
                       }else if(pers.usercashfloat.length==1){
                           p.totalAmount=pers.usercashfloat[0].amount;

                       }else{
                            p.totalAmount=pers.usercashfloat.reduce(reducer);
                       }
                     return p;
                     });


          }
       }

reduce function doc

, и в вашем шаблоне у вас будет что-то вроде:

 <div class="col-md-3" v-for="person in personsWithAmount">
     {{person.totalAmount}}
 </div>