Vue.js: Adding & removing rows

by ckissi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<div id="app">
<table class="table">
  <thead>
    <tr>
      <td><strong>Name</strong></td>
      <td><strong>Job</strong></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row in rows">
      <td><input type="text" v-model="row.name"></td>
      <td><input type="text" v-model="row.job"></td>
      <td><a @click="removeRow(row)">Remove</a></td>
    </tr>
  </tbody>
</table>
<div>
  <button class="button btn-primary" @click="addRow">Add row</button>
</div>
</div>

JavaScript

var app  = new Vue({
  el: "#app",
  data: {
    rows: [
      {name: "James Bond",job: "spy"},
      {name: "Goldfinger", job: "villain"}
    ]
  },
  methods:{
    addRow: function(){
      this.rows.push({name:"",job:""});
    },
    removeRow: function(row){
      //console.log(row);
      this.rows.$remove(row);
    }
  }
});