Menu
I'm trying to sum the values computed inside a v-for using vuejs, however I believe it's not working because I can not access the value from the computed value inside the v-for.
I need to display the total value as the user in {{total}} which is the sum of v-model.number="totalItem(item)"
Could someone pls give me some directions? Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button v-on:click="add">ADD ROW</button>
<p>$: {{ total }}</p>
<ul>
<li v-for="(item, index) in items">
<input type="text" v-model="item.name">
<input type="number" v-model.number="item.quantity" min="1">
<input type="number" v-model.number="item.price" min="0.00" max="1000000000.00" step="0.01">
<input type="number" v-model.number="totalItem(item)" readonly>
<button v-on:click="remove(index)">X</button>
</li>
</ul>
<pre>{{ items | json}}</pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="vuejs.js"></script>
</body>
</html>
JavaScript - Vue.js
new Vue({
el: '#app',
data: {
items: [{name: '', quantity: '', price: ''}]
},
methods: {
add: function () {
this.items.push({
name: '',
quantity: '',
price: '',
subTotal: ''
})
},
remove: function (index) {
this.items.splice(index, 1)
},
totalItem: function (item) {
return item.price * item.quantity;
}
},
computed : {
total: function() {
let sum = 0;
return this.items.reduce((sum, item) => sum + item.price, 0);
}
}
})
475
In Vue. js, computed properties enable you to create a property that can be used to modify, manipulate, and display data within your components in a readable and efficient manner. You can use computed properties to calculate and display values based on a value or set of values in the data model.
Computed Caching vs Methods Instead of a computed property, we can define the same function as a method. For the end result, the two approaches are indeed exactly the same. However, the difference is that computed properties are cached based on their reactive dependencies.
v-for directive is a Vue. js directive used to loop over a data usually an array or object. First, we will create a div element with id as app and let's apply the v-for directive to an element with data. Now we will create this data by initializing a Vue instance with the data attribute containing the value.
We can get the selected option on change with Vue. js by setting @change to a method. We set v-model to the key reactive property bind the selected value attribute value to key .
I've found my answer. It's simple.
v-model.number="item.total = item.quantity * item.price"
- For
computed: {
totalItem: function(){
let sum = 0;
for(let i = 0; i < this.items.length; i++){
sum += (parseFloat(this.items[i].price) * parseFloat(this.items[i].quantity));
}
return sum;
}
}
- ForEach
computed: {
totalItem: function(){
let sum = 0;
this.items.forEach(function(item) {
sum += (parseFloat(item.price) * parseFloat(item.quantity));
});
return sum;
}
}
Do something like this in the parent component:
computed: {
total: function(){
return this.items.reduce(function(prev, item){
return sum + item.price;
},0);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
