vue

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

<div id="app">
  <h2> {{product}} is in the stockh2>
  Current time: 
  <input v-bind:value="showDate" maxlength="300" style="width:300px"> 
  <hr>
  <table border=1>
    <tr>
      <th>quantityth>
      <th>nameth>
      <th>OOS(OUT OF STOCK)th>
      <th>optth>
    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">1span>  <span v-if="product.quantity > 0">0span>td>
       <td>
         <button @click="product.quantity += 1">addbutton>
         <button @click="product.quantity -= 1">reducebutton>
         <button @click="products.splice(products.indexOf(product),1)">×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: '
{{todo.name}}',
})



script>