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 

<div @delete(index)></div>

methods: {

    delete(index) {

        this.data.splice(index,1)

    }

}

Answer 2

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

Answer 3

补充楼上, 你可以在获取后台删除成功的反馈后, 直接更新table数据

 .then( res =>{

        console.log(res);

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

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

            // 在此处 tableData.splice(index, 1)

        }

        else{

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

        }

    })

Answer 4

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