Возвратить общую сумму из массива объектов

19 апреля 2021, 15:50

Вопрос: в div с классом target надо отобразить сумму товаров. Как правильно перебрать массив(должно быть 2 перебора или можно в 1 пробежать) и какой метод перебора лучше использовать?

 let vm = new Vue({
    el: '.target',
    data: {
      cart: [
        {price: 1000, cnt: 2}, // цена и количество товара(1000*2)
        {price: 800, cnt: 3} //(800*3)
      ]
    },
    computed: {
       cartTotal() { // ((1000*2)+(800*3))
          ???
       }   
    }
 });

Answer 1

Сколько переменных нужно вывести, столько и методов. Сопровождать потом легче будет.

let vm = new Vue({ 
  el: '#app', 
  data: { 
    cart: [{ 
        price: 1000, 
        cnt: 2 
      }, // цена и количество товара 
      { 
        price: 800, 
        cnt: 3 
      } 
    ], 
  }, 
  computed: { 
    sum() { 
      let result = 0; 
      this.cart.forEach(el=> result += el.price*el.cnt); 
      return result; 
    }, 
    counts(){ 
      let result = 0; 
      this.cart.forEach(el=> result += el.cnt); 
      return result; 
    }, 
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="app"> 
  <template> 
    <div style="height:300px"> <!-- style — чтобы бы виден результат в снипите. --> 
      <div v-for="el in cart"> 
        <p>Price: {{el.price}} Count: {{el.cnt}}</p> 
      </div> 
      <hr> 
      <p>Result: {{sum}}$, Count: {{counts}}</p> 
    </div> 
  </template> 
</div>