<div id="app">
<ul>
<li v-for="product in products">
<input type="number" v-model.number="product.quantity">
{{product.name}}
<span v-if="product.quantity === 0">
- OUT OF STACK
</span>
<button @click="product.quantity += 1">
ADD
</button>
</li>
</ul>
<h2>Total Left : {{totalProducts}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
products:[]
},
computed:{
totalProducts (){
return this.products.reduce((sum, product) =>{
// 每个商品的数量加在一起
return sum+product.quantity
}, 0)
}
},
created() {
fetch('https://api.myjson.com/bins/74l63')
.then(response =>response.json)
.then(json => {
this.products = json.products
})
}
})
</script>
