位置: IT常识 - 正文
Vue报错：Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘skuId‘)“(vue报错cannot read property)
编辑：rootadmin推荐整理分享Vue报错：Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘skuId‘)“(vue报错cannot read property)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue error in mounted hook,VUE报错不允许加载本地资源,VUE报错 内存资源不足,无法完成此操作,VUE报错 内存资源不足,无法完成此操作,VUE报错提示国际化,VUE报错提示国际化,VUE报错提示国际化,vue报错文件找不到,内容如对您有帮助，希望把文章链接给更多的朋友！
背景:
当点击按钮时候，正常情况控制台的Network应该要发送一个变化量，现在控制台的Network不仅不显示，而且还报错，报错信息如下：
vue.runtime.esm.js?c320:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'skuId')"
简单看了下，应该是模板找不到skuId这个变量
思路：
为了解决这个报错，我大致思考了一下：
1.定位报错行，看了代码，有用到报错提示的关键词“skuId”的地方，这一句代码是为了派发action
2.借助开发者工具检查是不是有skuId，可以看见确实有skuId这个值的
3.确定源头有数据，那么是不是我拿值的时候，没有拿到呢。为此，我打印语句：
handler(type,disNum,cart) { switch(type){ case "add": disNum = 1; break; case "minus": // 判断产品的个数大于1，才可以传递给服务器-1 //如果出现产品的个数小于等于1，传递给服务器个数0（原封不动） disNum = cart.skuNum > 1 ? -1 : 0; break; } console.log('带给服务器的变化量',disNum,cart); this.$store.dispatch('addOrUpdateShopCart',{skuId:cart.skuId,skuNum:disNum}); },可以看到此时的值是 undefined，也就是说，当我点击按钮的时候，传实参的值cart并没有传成功，cart是undefined，他下面的skuId自然就拿不到值了。
4.实参传不成功，那么是不是形参没有写好呢。一看，果然是，少了对应的形参。至此，修正报错得以解决。
总结：
因为做项目的时候，对于这种个例化的报错（也就是只有你一个知道自己正在写什么，跟别人解释还得费劲老半天，最后别人还不太能理解的报错）还是得从自身思考出发，才能有所长进。