Vue报错:Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘skuId‘)“

发布时间:2023-07-12 08:30

背景:

当点击按钮时候,正常情况控制台的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.实参传不成功,那么是不是形参没有写好呢。一看,果然是,少了对应的形参。至此,修正报错得以解决。

\"\"

总结:

因为做项目的时候,对于这种个例化的报错(也就是只有你一个知道自己正在写什么,跟别人解释还得费劲老半天,最后别人还不太能理解的报错)还是得从自身思考出发,才能有所长进。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号