vue.js: Как сделать расчет из объекта в массиве?

Question

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

https://codepen.io/Thinker95/pen/bGbOrJb

Ниже мой код:

Calculate(){
  this.fights[0].consumption = this.fights[0].rating*this.fights[0].quantity*this.fights[0].operation;
  this.answer = this.fights[0].consumption;

Answer 1

Когда вы делаете this.fights[0], вы используете только первый бой.

Вам нужно перебрать fights, чтобы установить потребление для каждого боя и вычислить this.answer

new Vue({
  el: "#app",
  data(){
    return {
      fights: [
        { device:'Laptop', rating:1000, quantity: 2, operation: 4, consumption: ''},
        { device:'Television', rating:900, quantity: 4, operation: 6, consumption: ''},
      ],
      answer: 0
    }
  },
  methods: {
    Calculate(){
      this.answer = 0
      this.fights.forEach(fight => {
        fight.consumption =  fight.rating * fight.quantity * fight.operation
        this.answer += fight.consumption
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
  <div v-for="fight in fights">
    <h3>{{ fight.device }}</h3>
    <p>Rating: {{ fight.rating }}</p>
    <p>Quantity: {{ fight.quantity }}</p>
    <p>Operation: {{ fight.operation }}</p>
    <p>Consumption: {{ fight.consumption }}</p>
    <hr>
  </div>
  <button @click="Calculate">calculate</button>
  {{ answer }}
</div>

Answer 2

Вы вычисляете только первый элемент массива.

Вы должны пройти через него

Поместите это в вашу функцию вычисления

this.fights.forEach((fight)=>{
  this.fight.consumption = this.fight.rating*this.fight.quantity*this.fight.operation;
  this.answer += this.fight.consumption
})