vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <h2> {{product}} is in the stock</h2>
  Current time: 
  <input v-bind:value="showDate" maxlength="300" style="width:300px"> 
  <hr>
  <table border=1>
    <tr>
      <th>quantity</th>
      <th>name</th>
      <th>OOS(OUT OF STOCK)</th>
      <th>opt</th>
    </tr>
    <tr v-for="product in products">
       <td> <input type="number" v-model.number="product.quantity"> </td>
       <td> <input type="text" v-model.name="product.name"></td>
       <td> <span v-if="product.quantity <= 0">1</span>  <span v-if="product.quantity > 0">0</span></td>
       <td>
         <button @click="product.quantity += 1">add</button>
         <button @click="product.quantity -= 1">reduce</button>
         <button @click="products.splice(products.indexOf(product),1)">&times;</button>
       </td>
    </tr>
  </table>

  <h2> Total Inventory: {{totalQuantity}}</h2>

  <hr>
  <p> {{message}} </p>
  <button v-on:click="reverseMessage">閫嗚浆娑堟伅</button>

  <hr>

  <ol>
      <fruit-item 
          v-for="item in fruits"
          v-bind:todo="item"
          v-bind:key="item.id">
      </fruit-item>
  </ol>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
const app = new Vue({
    el: '#app',
    data: {
        products: [],
        product: "Boots",
        showDate: new Date().toLocaleString(),
        message: 'This is normal text',
        fruits: [
            {id:0, name: 'apple'},
            {id:1, name: 'pear'},
            {id:2, name: 'banana'},
        ]
    },

    computed: {
        totalQuantity(){
            return this.products.reduce((sum, product) => {
                return sum + product.quantity
            }, 0)
        }
    },

    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    },

    created(){
        fetch('https://api.myjson.com/bins/74l63')
        .then(response => response.json())
        .then(json => {this.products = json.products})
    },
})

Vue.component('fruit-item', {
    props: ['todo'],
    template: '<li>{{todo.name}}</li>',
})



</script>