首先解釋一下什么是表單內容監(jiān)聽,我這里是將表單數據全部儲存到list變量中,當用戶填寫了內容之后,將用戶填寫的內容更新到list變量中,說是監(jiān)聽表單內容實際上是監(jiān)聽變量中的數據內容。監(jiān)聽數據變化可以用watch方法,它是Vue組件中的一個功能,可以監(jiān)聽數據變化,并在數據變化時執(zhí)行一些操作。
watch方法使用起來比較簡單,只需要傳兩個參數就可以,第一個參數是需要監(jiān)聽的變量數據,第二個參數則是當監(jiān)聽的數據發(fā)生變化時候執(zhí)行的回調函數,在回調函數中可以執(zhí)行各種方法,下面就是調用的例子;
在說一說為什么會介紹這個方法,也算是避坑吧,最近開發(fā)更新手術護理系統app的時候,其中有一個表單頁面需要增加新的功能,在選擇時間之后自動獲取用戶之后需要填寫的數據并更新到表單上,本身功能并不難,事件跟方法很快就 加上了,而且后臺的內容自動填充的接口也開發(fā)完畢,但是在實際測試當中,選擇時間之后,觸發(fā)了內容自動填充的事件,但是數據卻是怎么都寫不到數據庫當中,很是奇怪,第一反應是后臺接口的問題,或者是數據庫有問題,很奇怪流程,觸發(fā)節(jié)點,提交請求都沒有問題,就是寫入不進數據庫中。
最后找到原因就是表單內容設置了內容監(jiān)聽事件,在自動填充之后,由于頁面存儲的數據沒有更新,而監(jiān)聽事件又設置了內容發(fā)生改變自動提交數據內容,直接把剛寫入的內容覆蓋成空所以導致了這個烏龍事件,如果大家以后也遇到類似情況可以從頁面里面找一找是不是設置了數據監(jiān)聽。