My interactive form allows users to input an item, quantity, and cost per item like this:
<form @submit.prevent="submit">
<div class="form-group" v-for="(input,k) in inputs" :key="k">
<input type="text" class="form-control" v-model="input.item">
<input type="text" class="form-control" v-model="input.quantity">
<input type="text" class="form-control" v-model="input.cost">
<span>
<i class="fas fa-minus-circle" @click="remove(k)" v-show="k || ( !k && inputs.length > 1)">Remove</i>
<i class="fas fa-plus-circle" @click="add(k)" v-show="k == inputs.length-1">Add fields</i>
</span>
</div>
<button>Submit</button>
</form>
I'm looking to calculate the total cost of all the items added. I attempted it with:
export default {
methods: {
totalCost: function () {
for (let i = 0; i < this.inputs.length; i++) {
return this.inputs[i].cost*this.inputs[i].quantity
}
}
}
}
However, this only provides the total cost of the first item. How can I get the total cost of all user-input items?