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'

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

您可能感兴趣的文章:

nuxt 实现在其它js文件中使用store的方式
这篇文章主要介绍了nuxt 实现在其它js文件中使用store的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue实现表格批量审核功能实例代码
这篇文章主要为大家详细介绍了Vue实现表格批量审核功能实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
Vue虚拟dom被创建的方法
这篇文章主要介绍了Vue虚拟dom是如何被创建的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-10-10
vue中v-for指令完成列表渲染
这篇文章主要给大家分享的是vue中v-for指令完成列表渲染，下面文化章就围绕中v-for的相关资料在Vue中列表渲染做个简单总结和使用演示,需要的朋友可以参考一下，希望对大家有所帮助
2021-11-11
分享vue.js devtools遇到一系列问题
这篇文章主要为大家详细介绍了vue.js devtools遇到问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
Vue 实现一个命令式弹窗组件功能
这篇文章主要介绍了vue实现命令式弹窗组件功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
Vue ELement Table技巧表格业务需求实战示例
这篇文章主要介绍了Vue ELement Table技巧表格业务需求实战示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
Vue3 Reactive响应式原理逻辑详解
这篇文章主要介绍了Vue3 Reactive响应式原理逻辑详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-07-07
vue中的路由跳转tabBar图片和文字的高亮效果
这篇文章主要介绍了vue中的路由跳转tabBar图片和文字的高亮效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
图文详解Vue3没有代码提示问题的解决办法
最近在使用Vue.js时候没有自动提示,就很难受,下面这篇文章主要给大家介绍了关于Vue3没有代码提示问题的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-01-01