JSFiddle - React, Tailwind, and code Playground

by jordane reynet

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<table class="table" width="800" id="app">
     <thead>
    <tr>
      <th>Description</th>
      <th>Qte</th>
      <th>Prix unitaire</th>
      <th>Total HT</th>
      <th>Total TTC</th>
      <th>Actions</th>
    </tr>
     </thead>
     <tbody>
    <tr v-for="(row, index) in rows">
        <td><textarea name="description[0]" value="" /> </textarea></td>
      <td><input name="qte[]" class="text-right" type="text" v-model="row.quantity"></td>
      <td><input name="prixuni[]" class="text-right" type="text" v-model="row.price"> €</td>
      <td><input name="prixht[]" class="text-right" type="text" v-model="row.amount"> €</td>
      <td><input name="prixttc[0]" class="text-right" type="text" v-model="row.amount"> €</td>
      <td><a href="#!" @click.prevent="add(index)">Ajouter</a> <a href="#!" @click.prevent="del(index)">Supprimer</a>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>Total TTC</td>
      <td><input name="totalttc" class="text-right" type="text" v-model="total"> €</td>
    </tr>
     </tbody>
   </table>

JavaScript

Vue.config.debug = true

 var name=0;
 new Vue({
  el: "#app",
   data: {
  rows: [{
   quantity: 0,
    price: 0,
    amount: 0
  }],
  total: 0
   },
   methods: {
    updateRowNames(row){
        console.log(row);
        
 			}, 
  add(index) {
   this.rows.splice(index + 1, 0, {
   quantity: 0,
   price: 0,
   amount: 0,
    })
    
    this.updateRowNames(index);
  },
  del(index) {
   this.rows.splice(index, 1)
  }
   },
   watch: {
  rows: {
   handler() {
   this.rows.map(row => row.amount = Math.round(row.price * row.quantity * 100) / 100)
   this.total = Math.round(this.rows.reduce((accumulator, current) => accumulator + current.amount, 0) * 100) / 100
    },
    deep: true
  }
   }
 })