vue怎么实现点击删除表格某一行？

Question

如题，我每次点击都是删除第一行元素~~！！

<tbody>
                    <tr  class="gradeX" v-for="(lists,index) in inforList">
                        <td>{{lists.ID}}</td>
                        <td>{{lists.user}}</td>
                        <td>{{lists.suerNub}}</td>
                        <td>{{lists.desbe}}</td>
                        <td>
                             <div class="tpl-table-black-operation">
                                <a href="<%=basePath%>admin/resources/toAdd.jhtml"> 
                                    <i class="am-icon-pencil"></i> 
                                    {{lists.operat.edit}}
                                </a> 
                                <a href="javascript:;" class="tpl-table-black-operation-del" @click="delt(index)">
                                    <i class="am-icon-trash"></i> 
                                    {{lists.operat.del}}
                                </a>
                            </div>
                        </td>
                    </tr>
                </tbody>

new Vue({
        el:'#appp',
        data:{
             columnList:[{
                number:'编号',
                IDname:'角色名',
                nameNub:'角色编码',
                describe:'描述',
                operation:'操作'
            }],
            inforList:[
             {
                ID:'1',
                user:'超级管理员1',
                suerNub:'luozi',
                desbe:'超级管理员',
                operat:{
                    del:'删除',
                    edit:'编辑'
                }
            },
            {
                ID:'2',
                user:'超级管理员2',
                suerNub:'luozi',
                desbe:'超级管理员',
                operat:{
                    del:'删除',
                    edit:'编辑'
                }
            },
            ]
            },
            methods:{
                delt:function(index){
                     this.inforList.splice(index,1); 
                }
            }
        });

Answer 1

很有可能是key 问题, 删除是没问题 是显示问题
你在for 循环中 添加 :key="lists.ID"
也可以参考 这篇文章 v-for key 问题

Answer 2

你再试下，我这边试的是正常的啊，加个:key = "index"

Answer 3

点击的时候，获取当前数组行数的index

<ul>
    <li v-for="(item,index) in dataArr" @click="del(index)" :key="item.id">
        {{item.name}}
    <li/>
</ul>

methods:{
   del(index){
         this.dataArr.splice(index,1); 
    }
}