vue点击删除时，我怎么确定点的是第几个？

Question

页面如图所示：

点击删除时

现在的问题是：我点击删除后，我怎么判断我删除的这个id为多少？

HTML代码：

<div id="app" class="container"> 
    <table class="table table-hover">
        <tbody>
            <tr>
                <th>id</th>
                <th>名称</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in formData">
                <th>{{item.id}}</th>
                <th>{{item.name}}</th>
                <th><button data-toggle="modal" data-target="#myModal">删除</button></th>
            </tr>
        </tbody>
    </table>
    
    <!-- 弹出框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    你确定要删除吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="clickMe">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

js代码：

new Vue({
    el:"#app",
    data:{
        formData:[
            {
                id:1,
                name:"苹果"
            },
            {
                id:2,
                name:"西瓜"
            },
            {
                id:3,
                name:"葡萄"
            },
        ]
    },
    methods:{
        clickMe:function(){
            alert("你删除的id为：" + 1); //这里要弹出我点删除的id为多少
        }
    }
})

Answer 1

<div id="app" class="container"> 
    <table class="table table-hover">
        <tbody>
            <tr>
                <th>id</th>
                <th>名称</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in formData">
                <th>{{item.id}}</th>
                <th>{{item.name}}</th>
                <th><button data-toggle="modal" @click='current_id=item.id' data-target="#myModal">删除</button></th>
            </tr>
        </tbody>
    </table>
    
    <!-- 弹出框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    你确定要删除吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="clickMe">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
new Vue({
    el:"#app",
    data:{
        current_id: 0,
        formData:[
            {
                id:1,
                name:"苹果"
            },
            {
                id:2,
                name:"西瓜"
            },
            {
                id:3,
                name:"葡萄"
            },
        ]
    },
    methods:{
        clickMe:function(){
            alert("你删除的id为：" + current_id); //这里要弹出我点删除的id为多少
        }
    }
})

Answer 2

我的看法：
可以在删除的button上绑定click事件，点击后设置selectedRow为当前选中行的idx，这样就可以通过this.selectedRow获取。

 <tr v-for="item,idx in formData">
   <th>{{item.id}}</th>
   <th>{{item.name}}</th>
<th><button data-toggle="modal" @click="showDeleteModel(idx)">删除</button>

showDeleteModel(idx){
this.selectedIdx=idx;
this.deleteModelDisplay=true;
}

deleteModelDisplay用来控制model的显隐(v-if)。这样就全是vue的思路了。

---

bootstrap-table的事件用vue逻辑会清楚些。 不然你继续写下去就会混乱的，数据被谁控制、页面受谁渲染...

Answer 3

在v-for 循环中，会出现 index ,只需要点击的时候，把index 、id 传递到方法中即可

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

使用方法接受参数:index 、id

methods:{
   del(index,id){
         console.log(id)//当前id
         this.dataArr.splice(index,1); //删除当前行
    }
}

Answer 4

这个不简单吗？在父节点监听子节点，点击哪个节点，就把该节点地数据通过触发父节点地监听事件传递给父组件。
具体可以参考我这个Vue 树形组件：
https://github.com/kangbb/tree