vue对象变量中属性undefined时，watch监测不到变化

最新推荐文章于 2024-03-15 21:49:18 发布
最新推荐文章于 2024-03-15 21:49:18 发布
阅读量1k 收藏
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42028405/article/details/114417501
版权

问题：

父组件传递的对象中属性值初始值为undefined，子组件watch监测不到该对象变化。

原因：

受ES5的限制，Vue.js不能检测到对象属性的添加或删除

解决办法：

通过Object.assign()重新创建一个对象，例如this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

唯爱浅浅waqq914
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2 watch监听对象的属性值变化
白瑕 的博客
09-01 1万+
Vue2 watch监听对象属性值变化, 监听props对象, 监听对象整体变化, 参数对象的组织方法 如何避雷监听失败
当为Vue中的data赋值computed计算属性后，出现undefined的原因
啊啊怪的学习日记
01-19 8169
今天遇到一个问题，当我给data数据初始化一个computed计算属性时，在页面上竟然没有显示，放代码 <template> <div class="container"> <div>num1:{{num1}}</div> <div>num2:{{num2}}</div> <div>data中的数据{{sum}}</div> </div> </template&g
vue渲染时数据对象里面的子对象的属性报错undefined，但页面正常渲染
一梦晓三生的博客
12-21 3962
vue渲染时数据对象里面的子对象的属性报错undefined，但页面正常渲染。 报如图所示错误 页面中报错的位置 原因是在data中申明了空对象，页面在渲染的时候，数据还没获取到的时候，首先渲染的是初始值，所以会报错。而数据获取回来之后，由于vue双向绑定的特点，页面会再次正常渲染。所以从结果上看是页面既成功渲染了，又有报错信息。 解决办法 1.使用v-if判断 2.申明对象时为对象设置初始值 export default { data() { return { da
Vue2.0 解决watch对象属性变化监听不到问题
Quan的博客
10-28 2820
很早之前就遇到一个问题，父组件向子组件传值，子组件监听传入对象的某个属性。发现子组件使用deep watch都不能观察到对象中属性的变化，今天终于找到为啥出现这种问题和解决办法了。解决 为啥出现这种问题？受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。请参照https://v1-cn.vuejs.org/guide/reactivity.html解决方式： 通过vue的this...
vue 父组件请求数据，props为undefined，子组件获取不到值。
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
09-23 7166
vue 父组件请求数据，子组件获取不到值。props为undefined 解决办法就是 在渲染的时候给组件标签上面加一个条件渲染，在父组件请求完成后，将数据赋值，然后将渲染表达式成立； 示例 子组件A <div> 我是子组件 {{msg}} <div> <script> data(){ return{ m...
Vue中侦听器watch时，调用this时出现undefined问题
博哥的二进制世界
03-22 950
watch侦听器中，我们要将新的值赋给this.a出错 watch: { value: (newV, oldV) => { this.a = newV; } } 这里报错undefined，这里错误的原因是不能写成箭头函数。写成箭头函数后，this会取上下文，而不是组件里面的this了，正确写法为： watch: { value: function(newV, oldV) { this.a = newV; } } 如下图: ...
vue3学习教程第六节（vue3 中 computed watch watchEffect）
最新发布
weixin_39593730的博客
03-15 600
vue 项目中 computed() 、watch() 、watchEffect()的使用以及注意事项
vue2 到 vue3 的变化
zq144521的博客
06-14 447
watch，computed ，生命周期函数 在vue2 和 vue3中的写法等
React和Vue中监听变量变化的方法
明月如霜丶
12-09 3593
React 中 本地调试React代码的方法 yarn build 场景 假设有这样一个场景，父组件传递子组件一个A参数，子组件需要监听A参数的变化转换为state。 16之前 在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后 在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行prop...
解决vue无法侦听数组及对象属性的变化问题
10-15
主要介绍了解决vue无法侦听数组及对象属性的变化问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue侦听器watch获取this报undefined
木荣小逗比
01-08 1980
错误代码 watch: { data: { handler: (newVal) => { this.info = newVal }, deep: true } }, 修正后代码 watch: { data: { handler: function (newVal) { this.info = newVal }, ...
vuex：vuex取值undefined、vue监听器、以及监听失效（数据没有改变的问题）
好幸运
06-09 3449
一、取值undefined 网上很多都是直接取值的：this.$store.state.全局变量名称 但是具体问题具体分析嘛！看看vuex里面是怎么定义的 原来这个参数用了getters 那我们就懂了 this.$store.getters.全局变量名称才是正确的 二、监听 先贴代码吧，为我还不能肯定这个能用 import { mapGetters } from 'vuex' export default { name: "", compu...
VUE中父组件向子组件传值，子组件中获取props中的属性值为undefined
jeffwuyingkai的博客
04-28 7659
#最近新学习vue的开发，开发中遇到一个这样的问题，我这里简单写一个demo为大家说明下，希望能帮助到有一些同学 这里是我重新写的demo，能最直观的看到现象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
vue 父组件请求数据props为undefined子组件获取不到值。
weixin_40601606的博客
01-30 1669
方法一 在渲染的时候给组件标签上面加一个条件渲染，在父组件请求完成后，将数据赋值，然后将渲染表达式成立 <div> 我是子组件 {{tile}} <div> <script> data(){ return{ tile:"" } }, props:["newtil"], //这里需要注意props["要与父组件中绑定的< :newtil >一致"] mounted(){ th
vue监听路由变化
青春流年的博客
12-08 692
vue 路由监听获取route获取route.path获取route.name 获取route 第一种 // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to); } } 第二种 watch: { '$route':'routeChange' }, methods: { routeChange(){ console.log(this.$route); } } 第三种 watch: { // 在值
Vue.js中 watch 的高级用法
weixin_44273311的博客
08-21 216
Vue.js中 watch 的高级用法 假设有如下代码： <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastN
vue中函数参数传递为undefined
qq_36022463的博客
11-07 763
会在实际dom元素上绑定一个新的函数，，这个新的函数不再与当前Vue组件实例的上下文相关，，因此在这个新函数的内部，无法直接访问当前组件实例的数据，方法，或者计算属性。vue为事件处理程序创建一个新的函数，，并且这个函数的上下文不再和当前组件的上下文相关，，这个item会变成undefined，，，需要使用箭头函数，，将item传进去。, 箭头函数继承了外部作用域上下文，，可以访问外部的变量。在Vue中 ，时间处理函数 比如。
已解决Vue{{}}插值表达式中多层对象报错undefined未定义。多种可能的情况
qq_59594319的博客
08-13 1279
因为js是异步执行的，插值表达式加载和初始化数据同时进行，当执行到插值表达式的时候可能对象还没有初始化完成。这种情况发生的可能性比较小因为axois请求是异步的，加载插值的时候axios还没有请求完成还没来得及赋值给record。此时读取body为undefined这两种情况的发生都是因为页面在渲染插值表达式的时候里面对应的数据没有完全初始化完毕。
vue的watch的this指向undefined
04-02
在Vue中，当使用箭头函数或者在watch选项中使用字符串形式的处理函数时，this指向会变为undefined。这是因为箭头函数没有自己的this，会继承父级作用域的this，而在watch选项中使用字符串形式的处理函数时，Vue会将其转换为函数，并将其作为内部函数的参数传递，导致this指向丢失。 为了解决这个问题，可以使用函数形式的处理函数，或者在箭头函数中使用外部的this变量。例如： ``` watch: { value: function(newVal, oldVal) { // 在函数中使用this指向Vue实例 console.log(this); } } ``` 或者 ``` watch: { value: (newVal, oldVal) => { // 在箭头函数中使用外部的this变量 console.log(this); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值