关于vue中watch检测到不到对象属性的变化的解决方法
2018-02-08 11:23
936 查看
前言
在vue开发的过程中发现一个问题:改变vue.$data中对象的属性,watch是观测不到变化,但其实对象的属性是有变化的。这……,有点难以置信!
正文
<template> <div> <dl>name: {{option.name}}</dl> <dl>age: {{option.age}}</dl> <dl> <button @click="updateAgeTo25">update age with 25</button> </dl> </div> </template> <script> export default { data () { return { option: { name: "isaac", age: 24 } } }, watch: { option(val) { console.log(val) } }, methods: { updateAgeTo25() { this.option.age = 25 } } } </script>
如结果所示,option.age已经更新,但是watch中的option函数并没有被触发。
vue的watch钩子会那么鸡肋?我是不信的了。
深层watch
... watch: { option: { handler(newVal) { console.log(newVal); }, deep: true, immediate: true } }, ...
需要深层watch就需要开启deep属性
如结果所示。
另外,你会发现,在age没有变化前也是有打印出option,这是因为开启immediate属性,设定为true,
该回调将会在侦听开始之后被立即调用
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue2.0 解决watch对象属性变化监听不到问题
- 解决Vue2.0 watch对象属性变化监听不到的问题
- 关于submit() 对象不支持此属性或方法的解决方法
- vue.js 中如何监听watch:{}对象中的某个属性的变化,做相应的操作
- Thin的DateChooser代码学习(关于js的函数参数为一个完整的函数以及“对象不支持此属性或方法”错误的解决)(原创,转载请声明)
- vue(2) -- vue在watch中监听对象属性的变化
- 解决vue数组中对象属性变化页面不渲染问题
- vue将对象新增的属性添加到检测序列的方法
- 关于使用jquery时,ie8下提示对象不支持的属性或方法的解决办法
- 关于js调用ocx控件报错"对象不支持此属性或方法"的解决方法
- 关于submit() 对象不支持此属性或方法的解决方法
- 关于 vue 不能 watch 数组变化 和 对象变化的解决方案
- 关于IE7打开任何网页弹出[未处理的异常('对象不支持此属性或方法')发生在iexplorer.exe]错误调试框的解决办法
- 关于PowerDesgner数据模型设计中,属性不允许同名的解决方法
- mx:states包含mx:AddChild 在切换时提示错误"TypeError: Error #1009: 无法访问空对象引用的属性或方法"的解决方法
- 关于在后台调用Response.Writer();弹出框后页面css变化的解决方法
- TypeError: Error #1009: 无法访问空对象引用的属性或方法。(解决)
- 关于TextBox设置成MultiLine属性后控制字数的解决方法
- 关于【对象“***.rem”已经断开连接或不在服务器上】异常的解决方法
- 使用PageMethods老是出现"PageMethods未定义"或"对象不支持此属性或方法"的解决方法