JSFiddle - React, Tailwind, and code Playground

by greggpollack

HTML

<div id="app">

  <ul>
    <product v-for="product in products" :product="product" />
  </ul>
  <h2>Total Inventory: {{totalProducts()}}</h2>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
  Vue.component('product', {
  	template: `
      <li>
      <input type="number" v-model="product.quantity"> {{product.name}}
      <span v-if="product.quantity == 0">
        - OUT OF STOCK
    </span>
      <button @click="product.quantity = parseInt(product.quantity) + 1">
        Add
      </button>
      </li>
    `,
    props: ['product']
  })

  var app = new Vue({
    el: '#app',
    data: {
      products: []
    },
    
    methods: {
      totalProducts: function() {
        return this.products.reduce(function(sum, item) {
          return sum + parseInt(item.quantity)
        }, 0)
      }
    },

    created: function() {
      self = this
      fetch('https://api.myjson.com/bins/74l63')
        .then(function(response) {
          return response.json()
        })
        .then(function(data) {
          self.products = data.products
        })
    }
  });

</script>