vue如何在组件挂载完成之后在监听data中对象或属性的变化

Posted 2021-01-04 wantu

       项目的需求是当用户修改页面上输入框当中的内容后就必须点击保存，否则不能点击发送，当用户没有修改输入框当中的内容时就可以直接点击发送，然后启动流程。

　　我这里是用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进行判断了，如果用户没有修改可以直接发送了，如果用户修了则需要先保存保存完成后才可以点击发送、