vue中watch监听报错问题

最新推荐文章于 2024-01-03 10:35:54 发布
最新推荐文章于 2024-01-03 10:35:54 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 前端问题 文章标签： vue es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zilvzsy/article/details/116665097
版权

记笔记，免忘记！

报错如下图：

通过props将list数据传过来后，通过watch监听变化，并通知变化赋值。

如上写法，值是都获得到了，但是报个错，所以还是要处理的。于是将数据打印了下

console.log(newVal[0][0])
//undefined

//但是两个值，赋值成功，报错

但是newVal是有值的

解决方法：就不报错了，但是以下可能并不是最简单的方法，应该是重新赋值问题

vue2使用watch监听对象变化不起作用
m0_74824552的博客
12-13 306
就是说只能从父组件流向子组件，子组件是无法流回父组件，也就是无法从子组件修改父组件传来的值。今天使用vue2的watch属性时真的气死我了，将父组件的对象传递给子组件，子组件用watch来接受，但是结果就是不如意，父组件的对象怎么改变，子组件的watch方法就是没反应。因此我们在监听时应该通过computed函数来中转下，在computed函数中定义专门返回自己监听的对象，然后在watch中监听自己所定义的方法。以上属于个人的小笔记，也是小见解，如果有错误一定立刻改正。其他传值的逻辑正常写就行。
vue3.0 watch监听对象不生效
wz_cmyc的博客
10-10 2673
vue3 watch监听对象不生效
vue3 watch监听 和报错处理
weixin_50586667的博客
06-30 5460
watch( [props.count], (count, prevCount) => { console.log(count, 'count') } ) 会出现以下报错 1 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. ``` 是因为watch只能监听响应式数据：re..
vue 一、vue 基本使用 ， v- 指令，及生命周期，template组件模板 、watch数据监听
ws - 兮的博客空间
01-27 1192
一、下载vue 专用开发工具HbuilderX（也可以使用其他） 傻瓜式下载安装即可 HbuilderX下载：https://www.dcloud.io/hbuilderx.html 二、vue的第一个例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&...
vue watch 多层数据监听
qq_38321137的博客
01-18 1476
当需要监听的数据处于多层数据结构的深层中，在监听的时候，可能会出现‘watch’无效的情况。 可能是写法的问题： 例如： data(){ return{ a:{ b:{ c:{ d:'' } } } } } watch:{ 'a.b.c.d'(val) { //内容 } } ...
vue watch监听报错
weixin_44569565的博客
07-31 229
做项目的时候遇到一个报错，后来在排查中发现是watch里新加的一个监听导致，因为新加的这个监听数组是由接口动态获取，没获取到的时候就会报错。知道了原因后根据这篇文章，用if先判断有没有获取到，就不报错了。
关于使用watch监听函数的报错小坑需要注意！
亚妮先森博客
08-02 1273
1.关于使用watch监听函数的报错注意点 属性：Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。 代码： export default { name: 'HelloWorld', props: { msg: String }, data() { return { site: "菜鸟教程", url: "www.runoob.com", alexa: 1 } }, methods: {
vue 中使用 watch 出现了如下的报错的原因分析
10-16
在Vue.js框架中，`watch`是一个非常重要的特性，它允许我们监听并响应Vue实例上的数据属性变化。然而，在实际开发过程中，有时我们可能会遇到一些错误，比如标题中提到的“Method 'watch' has type 'object' in the ...
vue3.0学习笔记 （watch监听特性）
m0_58849641的博客
07-08 471
注意: deep:true是深度监听 开启后能够复杂的结构对象或数组 immediate:true是一开始就监听 wacthEffect默认immediate:true 在wacthEffect里 谁用到了 就会监听谁computed注重计算出来的结果(回调函数的返回值),所以必须要写返回值wacthEffect更注重过程(回调函数的函数体),所以返回值不是必须的...
解决Vue 使用Watch侦听器监听对象如何取得旧值问题
qq_41777791的博客
08-25 5261
解决Vue 使用Watch侦听器监听对象如何取得旧值问题
解决vue中监听input只能输入数字及英文或者其他情况的问题
10-18
当用户在输入框中输入内容时，watch监听到数据变化，然后可以执行相应的处理函数来过滤或修改数据。 具体到本例中，我们看到有三个input元素，每个都有自己的输入限制： 1. 第一个input元素只允许输入数字和英文...
Vue项目中props传值、data数据初始化、watch（immediate: true）和常用钩子之间先后关系
weixin_49477258的博客
05-22 942
代码： <script> export default { watch: { c: { handler () { console.log('cjy-----------------watch-' + this.b) console.log('cjy-----------------watch') }, immediate: true } }, props: { a: { typ
vue中使用watch监听路由导致多次请求问题解决方法
小白的博客
07-07 3559
首先想到的做法就是：直接监听，例： 但是这种方法在页面被缓存的情况下，成倍的调用watch里面的方法，多次向后端请求数据，可能会导致溢出有了第一种错误的出现，会想着是否可以将路径存在vuex中统一管理，例：vuex代码 监听路由，将最后路由的结果存进vuex，再使用computed获取这个值：changeRoute，最后再次监听：changeRoute， 结果并没有什么用直接使用watch监听地址栏，和上面的方法相同，依旧是computed获取，watch监听，就不会出现多次请求的情况了
​watch深度监听失效解决方案以及原因​
qq_39974331的博客
12-07 7725
总结： watch深度监听失效一般是由于变化的属性未初始化，导致watch进行深度监听初始化时，没有录入进去，从而导致监听失效。可以使用this.$set(监听的对象, 未初始化的监听对象的属性, 改动后的值)这样可以必然触发watch的监听。 案发情况： 首先，watch监听一般都这么写： watch: { obj(newVal, oldVal) { // todo console.log(newVal, oldVal) } } 复制代码 但是w...
Vue中用watch一次监听两个值的变化
最新发布
Vivien_CC的博客
01-03 4533
在Vue中，watch 本身不能监听多个变量。但我们可以通过返回具有计算属性的对象然后监听该对象，从而实现一次性“监听多个变量”。这样，我们就实现了再watch中一次性监听两个值的变化。想要一次性监听更多个值也可以这么操作。
IntelliJ IDEA 常用快捷键 之 Windows 版
热门推荐
CG国斌的博客
12-14 3万+
IntelliJ IDEA（简称 IDEA），是Java语言开发的集成环境，IDEA在业界被公认为最好的Java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、各类版本工具(Git、SVN、GitHub等)、JUnit、CVS整合、代码分析和创新的GUI设计等方面的功能都值得称道。IDEA作为现今最常用的开发工具之一，如果我们能够熟悉其快捷键，自然可以让我们在编程的过程中得心应手。
MyEclipse2014菜单项说明
DogAddan的博客
05-22 920
file 菜单项名 功能 快捷键 New 新建项目、文件 Alt+Shift+N Open File 打开项目、文件 Close 关闭当前编辑页面 Ctrl+S Close All 新建项目、文件 Ctrl+Shift+W Save 保存 Ctrl+S Save As 另存为 Save All 保存所有 Revert 恢复 Move 移动项...
vue 日常使用，watch监听写法，vue组件销毁重置
qq_39596012的博客
09-11 3953
vue watch写法 watch: { // 第一种方式：监听整个对象，每个属性值的变化都会执行handler // 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的 food: { // 每个属性值发生变化就会调用这个函数 handler(newVal, oldVal) { console.l
vue watch监听data中的数据
逆风优雅的博客
12-22 8581
在使用watch监听的时候，我们监听数组和对象并且进行深度监听的时候要使用的handler函数,并且需要添加deep:true属性 deep:true表示开启深度监听 immediate:true表示立即进行监听（因为watch监听，当监听的值没有发生变化的时候，它是不会监听的，如果想在第一次绑定的时候执行此监听函数 则需要 设置 immediate为true） <input type="text" v-model="userName"/> //监听 当user...
vue3watch报错
08-26
在Vue 3中，watch的使用有一些限制。根据引用，报错信息中提到了可能是箭头函数引起的this指向问题，但你的代码中并没有使用箭头函数。另外，引用中指出，watch只能监听响应式数据，如ref定义的属性和reactive定义的对象。如果你直接监听reactive定义对象中的属性是不允许的，除非使用函数转换一下。所以，可能是你在watch中所监听的数据不符合规范导致了报错。你可以检查一下你的监听数据是否符合规范，并尝试使用函数转换来解决这个问题。此外，引用中提到，在绘制echarts图表时需要确保图表容器已经获取到，否则需要先绘制容器再进行绘图操作。你可以在代码中添加对图表容器的判断和处理来避免报错。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue中watch的报错处理Error in callback for watcher “playing_list“:**](https://blog.csdn.net/sinat_36359516/article/details/119755097)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue3 watch监听 和报错处理](https://blog.csdn.net/weixin_50586667/article/details/118359702)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值