踩坑紀錄
問題一：
Vue使用Element UI時，當使用form表單提交數據，會在提交數據之後將表單清空，但使用時提交的數據都為空。
問題二：
當新增或修改數據時，必須重新請求查詢資料庫，以更新表格數據，但更新後頁面沒顯示更新後的數據，在刷新頁面或再更新一筆數據時才出現。
有問題代碼如下：
//提交用戶表單
submit(){
this.$refs.form.validate(valid => {
//驗證通過，執行if內的代碼
if(valid){
//新增或修改員工資料
this.fetchUpdateEmployee(this.form);
//重新查詢數據庫資料，更新數據
this.fetchEmployeeData();
}
//清空form表單的數據
this.$refs.form.resetFields();
//關閉彈窗
this.dialogFormVisible = false;
})
},
解決方案：
經我測試過後，推測原因如下：
針對問題一：太快清空數據，在發送異步請求到後台之前，數據就已經被清掉了，造成數據缺失。
針對問題二：當重新查詢數據庫的請求線程速度快於新增或修改員工資料時，造成查詢資料在新增/修改資料之前，產生此問題。
我使用定時器將這兩行代碼延後執行，避免上面兩個問題產生。
//提交用戶表單
submit(){
this.$refs.form.validate(valid => {
//驗證通過，執行if內的代碼
if(valid){
//新增或修改員工資料
this.fetchUpdateEmployee(this.form);
}
//關閉彈窗
this.dialogFormVisible = false;
//設置定時器，避免清空、查詢數據太快
setTimeout(() => {
//重新查詢數據庫資料，更新數據
this.fetchEmployeeData();
//清空form表單的數據
this.$refs.form.resetFields();
}, 200);
})
},
轉載請注明來源，歡迎對文章中的引用來源進行考證，歡迎指出任何有錯誤或不夠清晰的表達。可以郵件至 b8954008@gmail.com