vuejs2剪接只删除最后一个元素

Question

嗨，im试图从vuejs2数组中删除元素，这是我的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>

这是我的vuejs2代码

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

在控制台中，我把正确的索引和行也是正确的。我不知道代码有什么问题，非常感谢。

​

​

Answer 1

1. 为“like”数组中的每个元素使用了一些唯一的道具，而不是索引。
2. 将这个唯一的道具添加到: v-for所在的键中，如：

<tr class="o_data_row o_selected_row" v-for='(line , id) in lines' :key="line.uniq_prop">

1. 传递remove_line函数中的行项，如：

<button @click='remove_line(line)'

1. 在remove_line中找到要删除和拼接元素的索引：

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

Answer 2

<button v-on:click="lines.splice(id, 1)" class="fa fa-trash-o" name="delete"></button>

或

<button @click.prevent='remove_line(id)' class="fa fa-trash-o" name="delete"></button>