您的位置:首页 > Web前端 > Vue.js

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

2018-09-06 12:58 1091 查看

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

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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: