vue踩坑记录:属性报undefined错误问题

更新时间：2022年04月12日 08:39:41 作者：peade

这篇文章主要介绍了vue踩坑记录:属性报undefined错误问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue属性报undefined错误

在一个组件里，通过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'

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue安装和使用scss及sass与scss的区别详解
这篇文章主要介绍了vue安装和使用教程，用了很久css预编译器，但是一直不太清楚到底用的sass还是scss，直到有天被问住了有点尴尬，感兴趣的朋友一起看看吧
2018-10-10
vue在index.html中引入静态文件不生效问题及解决方法
这篇文章主要介绍了vue在index.html中引入静态文件不生效问题及解决方法，本文给大家分享两种原因分析，通过实例代码讲解的非常详细 ,需要的朋友可以参考下
2019-04-04
一文带你掌握Vue中的路由守卫
路由守卫（Route Guards）是 Vue Router 的一个功能,它允许我们在路由发生之前执行逻辑判断,这篇文章主要为大家介绍了Vue中路由守卫的具体应用,需要的可以了解下
2024-03-03
Vue Element plus使用方法梳理
Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，Element Plus是基于Vue3面向设计师和开发者的组件库，提供了配套设计资源，帮助你的网站快速成型
2022-12-12
vue附件下载无法打开的问题及解决
这篇文章主要介绍了vue附件下载无法打开的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
Vue3-新特性defineOptions和defineModel示例详解
在Vue3.3中新引入了defineOptions宏主要是用来定义Option API的选项,可以用defineOptions定义任意的选项,props、emits、expose、slots除外,本文给大家介绍Vue3-新特性defineOptions和defineModel,感兴趣的朋友一起看看吧
2023-11-11
基于canvas实现手写签名（vue）
这篇文章主要为大家详细介绍了基于canvas实现简易的手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
Vue布置导航守卫获取用户信息
这篇文章主要为大家介绍了Vue布置导航守卫获取用户信息，有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
Vue2.x父组件影响子组件样式的方法
在Vue.js开发中,我们经常需要创建可复用的组件,这些组件可能会有自己的样式规则,而有时我们希望父组件能够影响子组件的样式,本文将详细介绍如何使用v-deep以及一些相关的最佳实践,需要的朋友可以参考下
2024-10-10
Vue项目移动端滚动穿透问题的实现
这篇文章主要介绍了Vue项目移动端滚动穿透问题的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05