A basic Vue Project

<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>