Why Vue Code for Article

by greggpollack

HTML

<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 STOCK
      </span>
      <button @click="product.quantity += 1">
        Add
      </button>
    </li>
  </ul>

  <h2>Total Inventory: {{ totalProducts }}</h2>
</div>

<script src="https://unpkg.com/vue"></script>
<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>