zoukankan      html  css  js  c++  java
  • 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进行判断了,如果用户没有修改可以直接发送了,如果用户修了则需要先保存保存完成后才可以点击发送、

  • 相关阅读:
    kali linux命令
    kali查看beef密码
    kali的ifconfig: command not found 解决办法
    git创建分支及日常使用
    fatal: Authentication failed for 问题解决
    php开启xdebug扩展及xdebug通信原理
    yii项目开发配置
    windows上把git生成的ssh key
    yii在Windows下安装(通过composer方式)
    rar在linux下安装更新
  • 原文地址:https://www.cnblogs.com/wantu/p/9597757.html
Copyright © 2011-2022 走看看