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进行判断了,如果用户没有修改可以直接发送了,如果用户修了则需要先保存保存完成后才可以点击发送、
相关文章推荐
- vue.js 中如何监听watch:{}对象中的某个属性的变化,做相应的操作
- vue动态数据绑定1--如何监听一个对象的变化
- vue(2) -- vue在watch中监听对象属性的变化
- vuex--学习笔记(二)在组件中如何获取vuex的state对象中的属性
- Vue2.0 解决watch对象属性变化监听不到问题
- KVC/KVO 监听对象属性变化
- Servlet事件监听器、监听servletContext域对象创建和销毁、监听三个域对象属性变化
- vue 为什么组件的data要写成返回对象的函数
- 关于vue中watch检测到不到对象属性的变化的解决方法
- vue中的watch监听数据变化以及watch中各属性的详解
- 12.vue属性.监听.组件
- vue监听对象及对象属性问题
- 如何将groupby之后的groupby对象转化为dataframe
- vue中的watch监听数据变化及watch中各属性的详解
- vuejs - 如何对某个对象的属性进行watch监听?
- Vue项目中数据的深度监听或对象属性的监听
- vue--监听属性完成大小写字母间的转换
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
- Vue系列: 如何通过组件的属性props设置样式
- vue源码学习之Object.defineProperty对象属性监听