Skip to content

Instantly share code, notes, and snippets.

@parambirs
Created September 7, 2019 23:26
Show Gist options
  • Save parambirs/993bda113189b7e25f0b10122a65955f to your computer and use it in GitHub Desktop.
Save parambirs/993bda113189b7e25f0b10122a65955f to your computer and use it in GitHub Desktop.
Basic Vue Application
const app = new Vue({
el: '#app',
data: {
product: 'Boots',
myproducts: [
'Boots',
'Jacket',
'Hiking Socks'
],
products: []
},
computed: {
totalProducts() {
return this.products.reduce((s, p) => {
return s + p.quantity;
}, 0);
}
},
created() {
fetch('https://api.myjson.com/bins/74l63')
.then(response => response.json())
.then(json => {
this.products = json.products;
});
}
});
<div id="app">
<h2>{{ product }} are in stock.</h2>
<hr/>
<ul>
<li v-for="p in myproducts">{{ p }}</li>
</ul>
<hr/>
<ul>
<li v-for="p in products">
<input type="number" v-model.number="p.quantity">
{{ p.name }}
<span v-if="p.quantity === 0">
- OUT OF STOCK
</span>
<button @click="p.quantity += 1">Add</button>
</li>
</ul>
<h2>Total Inventory: {{ totalProducts }}</h2>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment