Basic Vue Application

app.js

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;
      });
  }
});

index.html

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