Когда вы делаете 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>