vue踩的坑:属性报undefined错误问题汇总

news2024/9/25 3:26:41

问题

在一个组件里,通过props传值进去对象,在控制台打印报错误信息,提示某属性不存在。

例如:

<div>{{data.param.aaa}}</div>

类似这种的,取对象子级下面的值,就报了undefined。

原因应该是在初始传值,最多默认 data={}。

我尝试在props里设置好默认值,但是依然报错

这么设置的props:

props:{
    data:Object,
    default:function(){
       return {
             param:''
        }
    }
}

这么设置,依然报错。 这个报错,应该是在父组件初始化了 data={}导致的。

最终解决方法(这句话用的最多的,注意看)

<div v-if="data.param">{{data.param.aaa}}</div>

加一个if判断,就可以了。

vue之各种报错问题

1 、undefined is not iterable!或者null is not iterable!"

 

 null和undefine是不可以拿来循环的,拿来循环就会报上面这个错误,循环的时候判断一下,不为null或者undefine的时候再拿来循环就可以了~~

2、Duplicate keys detected: ‘funs1’. This may cause an update error.

 

原因: key值不唯一

解决: 仔细检查是否用了同一个数据循环且:key值相同,如果相同给第二个key随便加一个标记就可以,如下:

:key=“index + ‘-only’”

3、报错内容:Maximum call stack size exceeded

 

这个一般都是路由的堆栈溢出的原因

说白了就是你写了死循环。

比如我的这个代码哈:

/**
*ifManager  是否是管理员
*str 是否有用户信息
*在路由跳转之前判断是否是管理员或者是否有用户信息,如果没有就跳转到login页面
*/
router.beforeEach((to, from, next) => {
	if (ifManager  || str) {
        next()
    } else {
        next(false);
        router.push('/login')
    }
})
/**
*乍一看好像没有什么问题,但是一运行就会出现上面的那个错误,为什么呢。因为当我们跳到login页面的时候,依旧会判断是否是管理员或者是否有用户信息,就陷入了一个死循环。
*
*/

解决办法就是:判断条件改一下就可以了

fManager || str|| to.path == '/login'

以上为个人经验,希望能给大家一个参考。 

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

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

相关文章

机器学习(21)---召回率(recall)、精度(precision)和准确率(accuracy)

文章目录 1. 分布不平衡的数据集2. TP、TN 、FP 、FN3. 混淆矩阵4. 各自的计算公式5. 例题应用 1. 分布不平衡的数据集 1. 精度&#xff08;precision&#xff09;和召回率&#xff08;recall&#xff09;是衡量机器学习模型性能的重要指标&#xff0c;特别是数据集分布不平衡的…

Ubuntu 20.04LTS环境下替换Vivado 2019.2代码编辑器

Ubuntu使用 打开 tools-settings-Text Editor 参考 打开 tools-settings-Text Editor 选中Custom Editor&#xff0c;然后点击右边的三个点&#xff0c;弹出这个界面 然后切换到linux 终端&#xff0c;安装xterm 然后在下面编辑框里输入&#xff1a; xterm -geometry 100x60 …

苹果电脑用什么清理软件比较好?

很多人都会有这样的误解&#xff1a;mac系统不用清理。实际上mac只是将系统垃圾隐藏了&#xff0c;并且需要通过特定的方式打开。但其实在我们日常工作不用这么麻烦&#xff0c;我们只需用苹果电脑专业的清理软件就好了。今天小编就给大家分享一下mac用什么清理软件好 一、mac用…

nvm: node版本管理工具

有时候需要新旧项目一起开发&#xff0c;但是旧的项目用的node版本比较低&#xff0c;也不好升级&#xff0c;所以我们可以使用nvm 来进行node版本管理 1. 准备工作 先删除掉原来的nodejs 下载nvm: 官网地址&#xff1a;Releases coreybutler/nvm-windows GitHub 百度网盘…

Apollo版本变迁里程碑:从诞生到巅峰的无人驾驶之路

特点与改进 概述里程碑版本变迁6.0特点及改进7.0特点及改进8.0特点及改进代码差异 福利活动 主页传送门&#xff1a;&#x1f4c0; 传送 概述 Apollo (阿波罗)是一个开放的、完整的、安全的平台&#xff0c;将帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统&#xf…

为啥 Erlang 没有像 Go、Scala 语言那样崛起?

为啥 Erlang 没有像 Go、Scala 语言那样崛起&#xff1f; - 知乎 问&#xff1a; 成熟的杀手级产品&#xff0c;技术栈完整&#xff0c;社区活跃&#xff0c;易上手使用的人比较多。 scala 目前业界应用广泛&#xff0c;技术栈完整&#xff0c;社区活跃&#xff0c;还有 spar…

Bun v1.0.3 发布,Zig 编写的 JavaScript 运行时

导读Bun 发布了其最新版本 v1.0.3&#xff0c;这是一个集 JavaScript 运行时、打包器、转译器和包管理器于一体的工具。这次的更新不仅修复了众多已知的问题&#xff0c;还引入了一系列令人期待的新功能。 首先&#xff0c;Bun 在这个版本中增加了对 TypeScript 的 emitDecora…

C++ 重载运算符在HotSpot VM中的应用

C支持运算符重载&#xff0c;对于Java开发者来说&#xff0c;这个可能比较陌生一些&#xff0c;因为Java不支持运算符重载。运算符重载本质上来说就是函数重载。下面介绍一下HotSpot VM中的运算符重载。 1、内存分配与释放 在C中可以通过new运算符创建一个C的类实例&#xff…

整车热管理「升温」,哪些厂商排名电子风扇市场份额TOP10

作为整车热管理系统的关键组成部分&#xff0c;风扇在传统燃油车时代主要是帮助发动机、空调系统进行散热冷却&#xff1b;同时&#xff0c;产品也经历了从硅油风扇到电子风扇&#xff08;从有刷电机到无刷电机的演进&#xff09;的升级。 而在新能源汽车的架构中&#xff0c;…

安防监控视频汇聚平台EasyCVR视频广场搜索异常,报错“通道未开启”的问题排查与解决

安防视频监控系统EasyCVR视频汇聚平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等&#xff0c;能对外分发RTSP、RTMP、FLV、…

arcgis添加天地图山东wtms服务

arcgis添加天地图wtms服务 首先打开天地图山东网站&#xff0c;进入首页![天地图山东首页](https://img-blog.csdnimg.cn/89df69e1c3d645b4a9e9652a08580342.png)然后点击开发资源进入开发页面点击成为开发者&#xff0c;进入申请秘钥页面&#xff0c;申请秘钥&#xff1b;![在…

Axure常用技巧及问题

以下内容将持续更新 目录 一、技巧1、版本选择2、快捷键3、定制工具栏 二、问题1、无法在浏览器预览2、发布到本地的HTML无法查看 一、技巧 1、版本选择 2、快捷键 3、定制工具栏 上方菜单栏-右键-自定义工具栏 二、问题 1、无法在浏览器预览 需要更改Axure配置 点击发布-…

win11无法打开chm格式的文件

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

NPM 常用命令(十一)

目录 1、npm shrinkwrap 1.1 使用语法 1.2 描述 2、npm star 2.1 使用语法 2.1 描述 3、npm stars 3.1 使用语法 3.2 描述 4、npm start 4.1 使用语法 4.2 描述 5、npm stop 5.1 使用语法 5.2 描述 6、npm team 6.1 使用语法 6.2 描述 6.3 详情 7、npm test…

MES系统电子秤数据采集

一、MES系统电子秤数据采集的意义&#xff1a; 电子秤数据采集是指利用电子秤设备对生产过程中的物料重量进行实时监测和记录。MES系统电子秤数据采集的意义在于提供一个集中管理和监控生产过程中物料重量的工具&#xff0c;使企业能够实现以下目标&#xff1a; 1. 质量控制&…

(部署服务器系列一)虚拟机模拟部署服务器

1、下载安装vmware 15 &#xff08;win7最高支持版&#xff09; 2、下载安装CentOS 配置2核2g&#xff08;最少&#xff09;磁盘100g&#xff08;不会实际占有&#xff09;选择时区-上海配置分区&#xff1a;https://blog.csdn.net/qq_35363507/article/details/127390889 &a…

GPU 虚拟化技术MIG简介和安装使用教程

使用多实例GPU (MIG/Multi-Instance GPU)可以将强大的显卡分成更小的部分&#xff0c;每个部分都有自己的工作&#xff0c;这样单张显卡可以同时运行不同的任务。本文将对其进行简单介绍并且提供安装和使用的示例。 什么是MIG NVIDIA Multi-Instance GPU (MIG) 技术是 NVIDIA…

Java 获取服务器资源(内存、负载、磁盘容量)

1.说明 我们经常通过SSH终端发送shell命令进行服务器运维&#xff0c;从而获取到服务器的各种资源&#xff0c;按照这个思路&#xff0c;我们可以利用Java做一个定时任务&#xff0c;定时采集服务器资源使用情况&#xff0c;从而实现服务器资源的动态呈现。 2.封装SSH操作方法…

淘宝商品详情API接口(item_get-获得taobao商品详情接口),淘宝API接口

淘宝商品详情API接口&#xff08;item_get-获得taobao商品详情接口&#xff09;&#xff0c;淘宝API接口可获取到商品链接&#xff0c;商品ID&#xff0c;商品标题&#xff0c;商品价格&#xff0c;品牌名称&#xff0c;店铺昵称&#xff0c;sku规格&#xff0c;sku属性&#x…

RK3568平台开发系列讲解(驱动篇)RK3568 PWM的使能与使用

🚀返回专栏总目录 文章目录 一、修改设备树1.1、添加 GPIO3_C5 引脚信息1.2、向 pwm15 节点追加信息二、使能 PWM 驱动三、PWM 驱动测试3.1. 确定 PWM15 对应的 pwmchipX 文件3.2. 调出 pwmchip15 的 pwm0 子目录3.3. 设置 PWM 的频率3.4. 设置 PWM 的占空比3.5. 设置 PWM 极…