JSFiddle - React, Tailwind, and code Playground

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>
  var app = new Vue({
    el: '#app',
    data: {
      products: []
    },
    computed: {
      totalProducts: function () {
        return this.products.reduce(function(sum, item) { return sum + item.quantity }, 0)
      }
    },
    created: function () {
      self = this
      fetch('https://api.myjson.com/bins/74l63')
        .then(function (response) { return response.json() })
        .then(function (json) { self.products = json.products })
    }
  })
</script>