Add and delete multiple rows from a table

Question

I have a dynamic table in my vue app that adds or deletes rows when buttons are clicked. The table looks like this.

<table class="stripped centered">
        <thead>
          <tr>
            <th></th>
            <th>No.</th>
            <th>Part No.</th>
            <th>Description</th>
            <th>Quantity</th>
            <th>unit market price</th>
            <th>Markup percentage</th>
            <th><a @click="addRow " class="waves-effect waves-light btn blue darken-3 white-text">Add row</a></th>
          </tr>
        </thead>
        <tbody class="body-rows" v-for="(row, index) in tableRows" :key="index">
          <tr>
            <td><a @click.prevent="deleteRow(index)" class="waves-effect waves-light btn red darken-3 white-text"><i class="material-icons left">delete</i></a></td>
            <td><input class="item-no" type="number" step="0.001" placeholder="Item no"></td>
            <td><input class="part-no" type="text" placeholder="part no"></td>
            <td><input type="text" placeholder="description"></td>
            <td><input class="quantity" type="number" step="0.01" placeholder="quantity"></td>
            <td><input class="ump" type="number" step="0.01" placeholder="UMP"></td>
            <td><input class="markup" type="number" step="0.01" placeholder="markup %"></td>
            <td><a class="add-sub waves-effect waves-light btn teal darken-3 white-text"><i class="material-icons left">add</i>sub</a></td>
          </tr>
          <tr>
            <td><div class="chip">Freight and Insurance</div></td>
            <td><div class="chip">Other costs</div></td>
            <td><div class="chip">Custom Rates</div></td>
            <td><div class="chip">Excise Tax</div></td>
            <td><div class="chip">VAT</div></td>
            <td><div class="chip">Surtax</div></td>
            <td><div class="chip">Withholding Tax</div></td>
          </tr>
          <tr>
            <td><input type="number" placeholder="freight & insurance"></td>
            <td><input type="number" placeholder="other costs"></td>
            <td><input type="number" placeholder="custom rates"></td>
            <td><input type="number" placeholder="excise tax"></td>
            <td><input type="number" placeholder="vat"></td>
            <td><input type="number" placeholder="surtax"></td>
            <td><input type="number" placeholder="withholding"></td>
          </tr>
        </tbody>
      </table>

As you see I am trying to add three rows in one iteration of the v-for loop. And in my script I have:

data(){
    return{
          currentRows: 0,
          tableRows: [],
    }
}
methods:{
    addRow(){
      this.currentRows++
      this.tableRows.push(this.currentRows)
    },
    deleteRow(index){
      this.tableRows.splice(index, 1)
},

The add button works and adds the three rows. But when I click the delete button on the row it deletes the last row instead of deleting it self. Any help would be appreciated. Thanks

Answer 1

Your implementation would look like this

<table class="stripped centered">
    <thead>
      <tr>
        <th></th>
        <th>No.</th>
        <th>Part No.</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>unit market price</th>
        <th>Markup percentage</th>
        <th><a @click="addRow " class="waves-effect waves-light btn blue darken-3 white-text">Add row</a></th>
      </tr>
    </thead>
    <tbody class="body-rows">
      <tr v-for="(row, index) in tableRows" :key=":key="JSON.stringify(row)"">
          <td>
            <table>
               <tr>
        <td><a @click.prevent="deleteRow(index)" class="waves-effect waves-light btn red darken-3 white-text"><i class="material-icons left">delete</i></a></td>
        <td><input class="item-no" type="number" step="0.001" placeholder="Item no"></td>
        <td><input class="part-no" type="text" placeholder="part no"></td>
        <td><input type="text" placeholder="description"></td>
        <td><input class="quantity" type="number" step="0.01" placeholder="quantity"></td>
        <td><input class="ump" type="number" step="0.01" placeholder="UMP"></td>
        <td><input class="markup" type="number" step="0.01" placeholder="markup %"></td>
        <td><a class="add-sub waves-effect waves-light btn teal darken-3 white-text"><i class="material-icons left">add</i>sub</a></td>
      </tr>
      <tr>
        <td><div class="chip">Freight and Insurance</div></td>
        <td><div class="chip">Other costs</div></td>
        <td><div class="chip">Custom Rates</div></td>
        <td><div class="chip">Excise Tax</div></td>
        <td><div class="chip">VAT</div></td>
        <td><div class="chip">Surtax</div></td>
        <td><div class="chip">Withholding Tax</div></td>
      </tr>
      <tr>
        <td><input type="number" placeholder="freight & insurance"></td>
        <td><input type="number" placeholder="other costs"></td>
        <td><input type="number" placeholder="custom rates"></td>
        <td><input type="number" placeholder="excise tax"></td>
        <td><input type="number" placeholder="vat"></td>
        <td><input type="number" placeholder="surtax"></td>
        <td><input type="number" placeholder="withholding"></td>
      </tr>
            </table>
          </td>          
      </tr>
    </tbody>
    </table>

Answer 2

You should modify your code as follows

in deleteRow function call pass row id as well

   <td><a @click.prevent="deleteRow(row.id,index)" class="waves-effect waves-light btn red 
   darken-3 white-text"><i class="material-icons left">delete</i></a></td>

and delete method as follows

   deleteRow(id,index){
      this.tableRows.splice(id, 1);
      this.tableRows.splice(index, 1)
   }