Vue.js: Adding & removing rows

by RENAUD DUGERT

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<div id="app">


  <table class="table">
    <thead>
      <tr>
        <td><strong>Date</strong></td>
    
        <td><strong>Account</strong></td>
        <td><strong>Debit</strong></td>
        <td><strong>Credit</strong></td>
        <td></td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows">
        <td>

           <input type="date" v-date="row.myDate">
        </td>
  
  <td>
       <select class="selectpicker" ref="select" v-model="row.select">
        <option value="Acc1">Account1</option>
        <option value="Acc2">Account2</option>
        <option value="Acc3">Account3</option>
        <option value="Acc4" selected>Account4</option>
        </select>
        </td>
        <td>
          <input type="text" v-model="row.debit" v-on:keypress="isNumber(event)">
        </td>
        <td>
          <input type="text" v-model="row.credit" v-on:keypress="isNumber(event)">
        </td>
        <td><a @click="removeRow(row)">Remove</a></td>
      </tr>
    </tbody>
    <tfooter>
       
  <td class="al-g"> <button class="button btn-primary" @click="addRow">Add Line</button></td>
  <td></td>
  <td class="al-r">tot D.: {{ totaldebit | roundme...

SCSS

input { 
    text-align: right; 
}
.al-r { 
    text-align: center; 
}
.al-g { 
    text-align: left; 
}

JavaScript

Vue.filter('roundme', function (value) {
  return value.toFixed(3);
})


var app = new Vue({
  el: "#app",
  data: {
    rows: [{debit:0, credit:0},

    ]
  },
    computed: {
    totaldebit() {
        return this.rows.reduce((total, row) => {
          return total + Number(row.debit);
        }, 0);
      },

      totalcredit() {
        return this.rows.reduce((total, row) => {
          return total + Number(row.credit);
        }, 0);
      }
  },
  methods: {
    addRow: function() {
      this.rows.push({myDate:"",
      account:"",
        debit: "",
        credit: ""
      });
    },
    removeRow: function(row) {
      //console.log(row);
      this.rows.$remove(row);
    },
    isNumber: function(evt) {
      evt = (evt) ? evt : window.event;
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
        evt.preventDefault();;
      } else {
        return true;
      }
    }
  }
});