項目的需求是當用戶修改頁面上輸入框當中的內容后就必須點擊保存,否則不能點擊發送,當用戶沒有修改輸入框當中的內容時就可以直接點擊發送,然后啟動流程。
我這里是用from表單去綁定所有輸入框當,所以需要深度監聽from的變化。代碼如下:
data () { return { // 綁定f的orm數據 preserveData: { reportNumber: 0, category: '', anonymous: 'false', reporterName: '', deptName: '', deptId: '', reporter: '' },// 保存狀態--是否修改了內容 saveStatus: false, // 記錄觸發監聽的次數 whetherCount: 0 } },
mounted () { // 監聽from表單的變化,如果觸發多次則必須保存 this.$watch('preserveData', () => { this.whetherCount++ // console.log(this.whetherCount) // 判斷修改的次數,如果大於2的話將狀態改為true,為1時是掛載的時候觸發的 if (this.whetherCount >= 2) { this.saveStatus = false } else if (this.whetherCount < 2) { this.saveStatus = true } }, { deep: true }) }
然后就直接根據saveStatus進行判斷了,如果用戶沒有修改可以直接發送了,如果用戶修了則需要先保存保存完成后才可以點擊發送、
