vue-table implements adding and deleting

index.html

<div id="app">
  <div class="table_box">
    <h1>Form exercises</h1>
    <input type="text" v-model="text"/>
    <button @click="add">Add</button>
    <table class="table" border="1">
      <thead>
        <tr>
          <th>Serial number</th>
          <th>Brand</th>
          <th>Time</th>
          <th>Operation</th>
        </tr>
        
      </thead>
      <tbody>
        <tr v-for="(v,k) in list" :key="k">
          <th>{{v.id}}</th>
          <th>{{v.name}}</th>
          <th>{{v.time}}</th>
          <th>
            <a href="#" @click.prevent="del(k)">Delete</a>
          </th>
        </tr>
      </tbody>
    </table>
  </div>
  
</div>
</body>
</html>

script.js

var vm = new Vue({
  el:'#app',
  data: {
    num: 1,
    list: [],
    text:'',
    
  },
  methods: {
    add: function () {
      this.list.unshift({
        "id": this.num++,
        "name": this.text,
        "time": new Date().toLocaleString(),
      });
    },
    del: function (index) {
      if (confirm("Are you sure to delete the current line")) {
        this.list.splice(index, 1);
      }
      
    },
    
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

style.css

.table_box {
  height: auto;
  width: 90%;
  margin: 5% auto;
}
 
.table {
  border-collapse: collapse;
  width: 100%;
  height: auto;
}
 
h1 {
  text-align: center;
}

vue-table-implements-adding-and-deleting.markdown

vue-table implements adding and deleting

A Pen by Edward Lance Lorilla on CodePen.

License.