Skip to content

Instantly share code, notes, and snippets.

@kevinnio kevinnio/vue-computed-2.html Secret
Created Apr 26, 2019

Embed
What would you like to do?
<div id="stock-app">
<h3>Inventory</h3>
<ul>
<li v-for="product in products">{{ product.name }}: {{ product.amount }}</li>
</ul>
<span>Item totals: {{ itemTotal }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#stock-app',
data: {
products: [
{ name: 'Apples', amount: 10 },
{ name: 'Oranges', amount: 50 },
{ name: 'Bananas', amount: 39 },
{ name: 'Pears', amount: 4 },
]
},
computed: {
itemTotal() {
return this.products.reduce((sum, item) => sum + item.amount, 0);
}
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.