最近有在需求中遇到2個表單頁面內(nèi)容在用戶輸入以后需要做本地緩存疆柔，而且頁面跳轉(zhuǎn)做了路由緩存處理發(fā)現(xiàn)了一些問題
項目的要求是 頁面的跳轉(zhuǎn)不能影響內(nèi)容的讀取弊攘，而且內(nèi)容填寫完整按鈕才會高亮
聽上去要求很簡單
效果如圖
圖片.png
注：途中的選擇常用聯(lián)系人可忽略網(wǎng)頁截圖 不好調(diào)試
正常在methods里面寫一個簡單的判斷讓后放在mounted里面就可以做到
如：
mounted() {
this.check()
},
methods:{
check() {
/* 驗證是否為空 */
if (
this.from.periods_value !== "" &&
this.from.school_value !== "" &&
this.from.relation_value !== "" &&
this.from.QQ_Message !== ""
) {
this.btnFlag = false
}else{
this.btnFlag = true
}
},
}
如上當(dāng)頁面加載的時候就可以判斷了，當(dāng)然在表單內(nèi)容被改動的時候也要調(diào)用check()
然后會發(fā)現(xiàn)一個問題摔癣，第一次對于表單操作完成后 所有的判斷都是正常奴饮，可當(dāng)頁面跳轉(zhuǎn)以后或者刷新以后 會發(fā)現(xiàn)按鈕變灰色的，但是表單里面都有數(shù)據(jù)
如下圖
圖片.png
調(diào)試分析得出當(dāng)頁面進來的時候或者跳轉(zhuǎn)的時候择浊，數(shù)據(jù)可以讀取緩存戴卜，但是check并沒有執(zhí)行
解決方案：
想到了vue的生命周期，在頁面更新狀態(tài)以后去調(diào)用check()就可以解決這個問題了
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態(tài)===============》');
},
updated: function () {
console.group('beforeUpdate 更新后狀態(tài)===============》');
}
在如上的狀態(tài)使用都可以
這是針對這個問題我的解決方案近她，如果各位看官們有更好更有效的方式叉瘩，歡迎留言！Ｕ成印＾泵濉！
