Hola, estoy tratando de eliminar el elemento de la matriz en vuejs2 y este es mi código html

<tr class="o_data_row o_selected_row" v-for='(line , id) in lines'>
    <td>anything here</td>
    <td class="o_list_record_remove" style='width:10%'>
        <button @click='remove_line(id)' class="fa fa-trash-o" name="delete"></button>
    </td>
</tr>

Y este es mi código vuejs2

remove_line:function(index)
{
    console.log(index);
    console.log(this.lines);
    this.lines.splice(index,1);
}

En la consola, obtengo el índice correcto y las líneas también son correctas. No sé qué tiene de malo el código, muchas gracias.

enter image description here

1
softya 18 abr. 2020 a las 11:45

2 respuestas

  1. use un accesorio único para cada elemento en la matriz de 'líneas', no un índice.
  2. Agregue este accesorio único a: clave donde v-for se encuentra así:
<tr class="o_data_row o_selected_row" v-for='(line , id) in lines' :key="line.uniq_prop">
  1. Pase el elemento de líneas en la función remove_line de esta manera:
<button @click='remove_line(line)'
  1. En remove_line encuentra el índice de un elemento que está a punto de eliminar y empalma:
remove_line:function(line)
{
    console.log(line);
    console.log(this.lines);
    const index = this.lines.indexOf(line);
    this.lines.splice(index,1);
}
0
Anatoly 18 abr. 2020 a las 08:59
<button v-on:click="lines.splice(id, 1)" class="fa fa-trash-o" name="delete"></button>

O

<button @click.prevent='remove_line(id)' class="fa fa-trash-o" name="delete"></button>
0
Emir Vatric 18 abr. 2020 a las 09:03