Skip to content

Instantly share code, notes, and snippets.

@kevinnio
Created April 26, 2019 23:09
Show Gist options
  • Save kevinnio/bced2f0748ff7021e6f9fc0460621c6e to your computer and use it in GitHub Desktop.
Save kevinnio/bced2f0748ff7021e6f9fc0460621c6e to your computer and use it in GitHub Desktop.
<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