how to delete row with v-for-CodePudding

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

OrdenTrabajo.vue

 <table >
      <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="#" 
                   
                   @click.prevent="removeFromTrabajo({ id: index   1 })"
                   data-toggle="tooltip"
                   data-placement="top"
                   title="Eliminar">
                   <i ></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, but it is not that I am selecting. for example I select the first one, but delete the last one.

CodePudding user response：

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

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);
    },

CodePudding user response：

All you need to do is just pass the appropriate index from the template and then use that inside the method

new Vue({
  el: "#table",
  data: () => ({
    trabajos: [ { descripcion: 'abc' }, { descripcion: 'def' }, { descripcion: 'ghi' } ]
  }),
  methods: {
    /** Changes added in below function **/
    removeFromTrabajo(index) {
        this.trabajos.splice(index, 1); // 1 indicates the number of element to be removed and index indicates the position from where it has to be removed
    }
  }
});

<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" >
  <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="#" 
          
          @click.prevent="removeFromTrabajo(index)" // change added here
          data-toggle="tooltip"
          data-placement="top"
          title="Eliminar">
          <i  style="color=red;"></i>
        </a>                             
      </td>
    </tr>
  </tbody>
</table>