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

news2025/1/18 17:08:17

背景:

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

总结:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409100.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【React全家桶】Flux与Redux

🎞️🎞️🎞️ 博主主页: 糖 -O- 👉👉👉 react专栏:react全家桶 🌹🌹🌹希望各位博主多多支持!!&a…

Vue3.0 项目启动(打造企业级音乐App)

系列文章目录 内容参考链接Vue3.0 项目启动Vue3.0 项目启动(打造企业级音乐App)Vue3.0项目——打造企业级音乐App(一)Tab栏、轮播图、歌单列表、滚动组件Vue3.0项目——打造企业级音乐App(二)图片懒加载、…

功能:Session与Vue:登录获取权限,并完成session存储

一、需求说明 1、系统登录,每个账号表示一位用户,每位用户分配有不同的权限,不同的权限有着不同的操作。 2、现需要每位用户登录时都能获取到对应的权限,在登录系统中进行使用,退出时则清空权限。 3、项目框架&#x…

一个非常好看的前端Vue3登录页面

Vue3lessElement Plus <template> <div id"login"><div id"contain"><div id"left_card"><h1>欢迎来到我的Vue3大世界</h1><span>Welcome to my Vue3 world</span></div><div id&quo…

HTML学习笔记 1-用HBuilderX写的HTML无法在浏览器上运行怎么办?问题出在这里:HBuilderX外部web服务支撑配置

初学HTML的时候&#xff0c;用的是HBuilderX开发软件 写了一段简单的代码 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>这是网页的标题</title></head><body><p>这里是网页的内容</p>&l…

解决Vue报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

问题描述&#xff1a;重复点击导航时&#xff0c;控制台出现报错 &#xff0c;虽然不影响功能使用&#xff0c;但也不能坐视不管。解决 Vue 重复点击相同路由&#xff0c;出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题 .报错内容&#…

Nginx部署前端静态网站详细教学(一步步操作)

前言 从零开始使用Xshell、Xftp、Nginx 简单部署静态网站&#xff0c;需准备云服务器(阿里云、腾讯云、华为云等都可) 一.下载安装Xshell和Xftp XShell 用于命令行操作服务器&#xff0c;Xftp 用于对服务器的文件上传和下载 官方下载地址&#xff1a;NetSarang Homepage CN - …

你评论,我赠书~【哈士奇赠书 - 16期】〖Vue.js 快速入门实战〗等你来拿

推荐&#xff1a; Python全栈白宝书专栏&#xff0c;免费阶段订阅数量4300&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;加入社区的小伙伴们&#xff0c;除了可以获取博主所有付费专栏的阅读权限之外&#xff0c;还有机会加入 星荐官共赢计划…

html网页调用后端python代码方法

当我们利用html代码制作网页时&#xff0c;可以用以下方法进行python代码的调用&#xff1a; 1.简单的python代码例如输出‘hello world’时,可以选择直接在网页写入python代码的方式调用&#xff0c;这时候我们就需要了解Pyscript了。以下是在网页里直接运行简易python语段的…

AJAX中的跨域(CORS) 问题 (更新于2023.02.04)

目录​​​​​​​ 预检请求 实例讲解 2023.02.04 更新 此文章在介绍跨域加载的同时&#xff0c;也解决了在使用axios.post()时如下跨域加载失败问题&#xff1a; from origin null has been blocked by CORS policy: Response to preflight request doesnt pass access c…

element-ui实现图片上传功能(前台部分)

文章目录前言一、 template 部分二、script部分1、导入token2、在data中注册以下3、method中的方法4、style前言 最近做的项目中需要实现图片上传功能&#xff0c;一开始也不懂&#xff0c;经过一段时间的学习后&#xff0c;终于实现了图片上传功能。我将分为前台与后台两部分…

vue 基于axios封装request接口请求——request.js文件

目录 了解几个Content-type类型 第一种&#xff1a;application/json;charsetUTF-8 第二种&#xff1a;multipart/form-data 第三种&#xff1a; application/x-www-form-urlencoded 第一步新建request.js文件 第二步新建services/apiUrl文件 第三步新建services/index.…

【前端】深入浅出缓存原理

缓存的基本原理 对于前端来说&#xff0c;缓存主要分为浏览器缓存&#xff08;比如 localStorage、sessionStorage、cookie等等&#xff09;以及http缓存&#xff0c;也是本文主要讲述的。 当然叫法也不一样&#xff0c;比如客户端缓存大概包括浏览器缓存和http缓存 所谓htt…

手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内存泄露等】

前端的那些基本标签&#x1f353;&#x1f353; 直角三角形&#x1f353;&#x1f353;文件扩展名&#x1f353;&#x1f353;分隔符&#x1f353;&#x1f353;单向绑定&#x1f353;&#x1f353;创建数组&#x1f353;&#x1f353;判断版本&#x1f353;&#x1f353;什么是…

四、nginx静态文件的配置

1. 根据上节内容的提示&#xff0c;我们知道如何进行nginx的信号控制和命令行控制了。 2. 这节主要是学习nginx的静态文件、缓存、静态文件压缩等相关内容。 一、 配置并访问nginx静态文件 1.1 root配置nginx静态文件地址 在nginx.conf 配置文件中默认使用root配置了nginx静态…

vue项目使用svg图片

&#xff08;svg-sprite-loader以及vue2-svg-icon的使用&#xff09; 第一种方式&#xff1a; 1、安装svg-sprite-loader npm install svg-sprite-loader --save-dev 2、webpack 配置&#xff08;build/webpack.base.conf.js&#xff09; { test: /\.svg$/, loader: svg-spr…

小程序表单校验uni-forms正确使用方式及避坑指南

小程序表单校验uni-forms正确使用方式及避坑指南一、前言二、成果展示三、uni-forms即时校验四、uni-forms自定义校验规则五、uni-forms异步校验六、完整示例源码七、最后&#xff0c;点个赞一、前言 小程序上使用表单理应是很常用&#xff0c;也很必须的功能&#xff0c;因为…

【微信小程序】自定义组件

组件的创建与引用 1.1、创建组件 &#xff08;1&#xff09;在项目的根目录中&#xff0c;鼠标右键&#xff0c;创建 components > test 文件夹 &#xff08;2&#xff09;在新建的 components > test 文件夹中&#xff0c;鼠标右键&#xff0c;点击“新建 Component” …

通过JavaScript、css、H5 实现简单的tab栏的切换和复用

目录 一、效果展示 二、实现的大致原理 三、H5的布局 四、CSS样式 五、JS代码内容 六、完整代码 一、效果展示 二、实现的大致原理 1.我们先通过css 和h5布局得到最基本的tab栏样式&#xff08;有代码参考&#xff09; 2.在获得样式&#xff0c;给我们所需要点击的目标设…

yolov5部署+微信小程序前端展示

分为yolov5项目部署和微信小程序两部分&#xff0c;先介绍微信小程序前端展示flask后端&#xff0c;之后介绍项目部署这部分。 一、先上效果图 1. 点击选择图片&#xff0c;调用摄像头选择图片 2.选择图片之后&#xff0c;点击开始检测&#xff0c;然后返回结果 ​​​​​​…