Skip to content

Instantly share code, notes, and snippets.

@kevinnio
Created April 26, 2019 23:10
Show Gist options
  • Save kevinnio/e54764aeefe1357cd621ee399cfcca55 to your computer and use it in GitHub Desktop.
Save kevinnio/e54764aeefe1357cd621ee399cfcca55 to your computer and use it in GitHub Desktop.
<div id="stock-app">
<h3>Inventory</h3>
<ul>
<li v-for="product in products">
<button v-on:click="product.amount += 1">Add</button>
<button v-on:click="product.amount -= 1">Remove</button>
{{ 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