鍍金池/ 問答/HTML5  HTML/ vue在刪除列表后，如何更新列表？

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

clipboard.png

我用delete請求把id傳給后臺。

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

這樣用戶體驗(yàn)肯定不好

怎樣才能解決這個問題？

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});
        }
    })
}
回答
編輯回答
拽很帥

1.你的頁面進(jìn)來的時候肯定有個拉取數(shù)據(jù)的方法吧，刪除成功之后調(diào)用一下那個方法，數(shù)據(jù)不就刷新了么
2.如果你不想重新請求數(shù)據(jù)，那么直接操作table的數(shù)據(jù)源，data.splice(index, 1)

2017年10月15日 22:25
編輯回答
淺淺

刪除成功后，重新請求數(shù)據(jù)，（注意查詢條件）

2018年8月3日 14:01
編輯回答
瘋浪

對于前端優(yōu)化盡可能的少調(diào)用接口，所以建議你還是直接通過變異方法刪除數(shù)據(jù)吧!
寫個偽代碼

v-for="(item, index)" in dataList 
<div @delete(index)></div>
methods: {
    delete(index) {
        this.data.splice(index,1)
    }
}
2018年9月10日 15:44
編輯回答
萌面人

建議重新獲取下列表數(shù)據(jù)即可。

2017年7月5日 16:07
編輯回答
妖妖

補(bǔ)充樓上, 你可以在獲取后臺刪除成功的反饋后, 直接更新table數(shù)據(jù)

 .then( res =>{
        console.log(res);
        if(res.data.status == 1){
            layer.msg('刪除成功',{time:1500});
            // 在此處 tableData.splice(index, 1)
        }
        else{
            layer.msg('刪除失敗',{time:1500});
        }
    })
2018年9月3日 09:38