vue、如何在組件掛載完成之后在監聽data中對象或屬性的變化


       項目的需求是當用戶修改頁面上輸入框當中的內容后就必須點擊保存,否則不能點擊發送,當用戶沒有修改輸入框當中的內容時就可以直接點擊發送,然后啟動流程。

  我這里是用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進行判斷了,如果用戶沒有修改可以直接發送了,如果用戶修了則需要先保存保存完成后才可以點擊發送、


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM