how to delete row with v-for

Question

for that I am filling with a push and also adding an index to each row, what I need is to delete the row.

addTrabajo(state) {
    state.trabajos.push({
        vehicle_id: state.newOrdenTrabajo.vehicle_id,
        km: state.newOrdenTrabajo.km,
        descripcion: state.newOrdenTrabajo.descripcion,
    })
},

OrdenTrabajo.vue

 <table class="table table-hover table-striped mt-3 table-sm text-white bg-dark">
      <thead>
             <tr>
                 <th>#</th>
                 <th>Trabajo</th>
                 <th></th>
             </tr>
      </thead>
      <tbody>
         <tr v-for="(trabajo, index) in trabajos" :key="index">
             <td>{{index + 1}}</td>
             <td>{{ trabajo.descripcion }}</td>
             <td>
                 <a 
                   href="#" 
                   class="btn btn-danger btn-sm"
                   @click.prevent="removeFromTrabajo({ id: index + 1 })"
                   data-toggle="tooltip"
                   data-placement="top"
                   title="Eliminar">
                   <i class="fas fa-ban"></i>
                 </a>                             
              </td>
          </tr>
      </tbody>
 </table>
  

script.js

removeFromTrabajo(state, data) {
    let found = state.trabajos.indexOf(data.id)
    state.trabajos.splice(found)
},

The problem is that when eliminating, the last one is eliminated though it is not the one that's been selected. For example: I select the first one, but last one is being deleted.

Answer 1

You only need to pass the index to the function. In removeFromTrabajo you can directly access the list using this.trabajos, check if the item at it exists, and then use Array#splice to remove the item at this index by passing a second parameter:

deleteCount (Optional): : An integer indicating the number of elements in the array to remove from start. If deleteCount is omitted, or if its value is equal to or larger than array.length - start (that is, if it is equal to or greater than the number of elements left in the array, starting at start), then all the elements from start to the end of the array will be deleted. If deleteCount is 0 or negative, no elements are removed.

new Vue({
  el: "#table",
  data: () => ({
    trabajos: [ { descripcion: '1' }, { descripcion: '2' }, { descripcion: '3' } ]
  }),
  methods: {
    removeFromTrabajo(index) {
      const item = this.trabajos[index];
      if(item) {
        this.trabajos.splice(index, 1);
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<table id="table" class="table table-hover table-striped mt-3 table-sm text-white bg-dark">
  <thead>
    <tr><th>#</th> <th>Trabajo</th><th></th></tr>
  </thead>
  <tbody>
    <tr v-for="(trabajo, index) in trabajos" :key="index">
      <td>{{index + 1}}</td>
      <td>{{ trabajo.descripcion }}</td>
      <td>
        <a 
          href="#" 
          class="btn btn-danger btn-sm"
          @click.prevent="removeFromTrabajo(index)"
          data-toggle="tooltip"
          data-placement="top"
          title="Eliminar">
          <i class="fas fa-ban"></i>
        </a>                             
      </td>
    </tr>
  </tbody>
</table>

Answer 2

You are passing just id in an object i.e.

removeFromTrabajo({ id: index + 1 })

Live Demo using filter

So you should receive only single argument with an id and you should remove as:

removeFromTrabajo(data) {
      console.log(this.trabajos);
      this.trabajos = this.trabajos.filter((o, index) => data.id !== index + 1);
    },