vue在删除列表后，如何更新列表？

Question

我用delete请求把id传给后台。

假如我删的是BD，删除后列表是不刷新的，只有按下F5才能看到BD被删了。

这样用户体验肯定不好

怎样才能解决这个问题？

del:function(current_id){       

    axios.delete('/role/delete',{

        headers: {

            Authorization : getCookie('token') 

        },

        params:{

            id:current_id

        }

    })

    .then( res =>{

        console.log(res);

        if(res.data.status == 1){

            layer.msg('删除成功',{time:1500});

        }

        else{

            layer.msg('删除失败',{time:1500});

        }

    })

}

Answer 1

对于前端优化尽可能的少调用接口，所以建议你还是直接通过变异方法删除数据吧!写个伪代码v-for="(item, index)" in dataList&nbsp;<div @delete(index)></div>methods: {&nbsp; &nbsp; delete(index) {&nbsp; &nbsp; &nbsp; &nbsp; this.data.splice(index,1)&nbsp; &nbsp; }}

Answer 2

建议重新获取下列表数据即可。

Answer 3

补充楼上, 你可以在获取后台删除成功的反馈后, 直接更新table数据&nbsp;.then( res =>{&nbsp; &nbsp; &nbsp; &nbsp; console.log(res);&nbsp; &nbsp; &nbsp; &nbsp; if(res.data.status == 1){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; layer.msg('删除成功',{time:1500});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 在此处 tableData.splice(index, 1)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; layer.msg('删除失败',{time:1500});&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })

Answer 4

删除成功后，重新请求数据，（注意查询条件）