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

目录
  • vue属性报undefined错误
    • 最终解决方法
  • vue之各种报错问题

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'

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

赞 (0)

相关推荐

  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

  • vue props传值失败 输出undefined的解决方法

    如果在prop中传的值为一个没有使用特殊命名规则的变量如:(type),可以顺利传值: <code class="language-html"><div id="app"> <test :type="type"></test> </div> Vue.component("test", { props: ['type'], template: '<div @cli

  • 解决vue侦听器watch,调用this时出现undefined的问题

    watch侦听器中,我们要将新的值赋给this.a出错 watch: { value: (newV, oldV) => { this.a = newV; } } 这里报错undefined,这里错误的原因是不能写成箭头函数.写成箭头函数后,this会取上下文,而不是组件里面的this了,正确写法为: watch: { value: function(newV, oldV) { this.a = newV; } } 如下图: 看考链接:https://cn.vuejs.org/v2/api/#wa

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

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

    目录 vue属性报undefined错误 最终解决方法 vue之各种报错问题 vue属性报undefined错误 在一个组件里,通过props传值进去对象,在控制台打印报错误信息,提示某属性不存在. 例如: <div>{{data.param.aaa}}</div> 类似这种的,取对象子级下面的值,就报了undefined. 原因应该是在初始传值,最多默认 data={}. 我尝试在props里设置好默认值,但是依然报错 这么设置的props: props:{     data:O

  • vue踩坑记录之数组定义和赋值问题

    vue踩坑记录之数组定义和赋值问题

    问题场景:vue页面初始化展示请求后台返回的数据失败,没有报错 <el-form-item label="有效日期"> <div class="block"> <el-date-picker v-model="effective_date" type="daterange" range-separator="至" start-placeholder="开始日期&quo

  • vue踩坑记-在项目中安装依赖模块npm install报错

    在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modules\abbrev npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall access npm ERR! enoent ENOENT: no such file or directory, access 'D:\ShopApp\nod

  • vue踩坑记之npm install报错问题解决总结

    vue踩坑记之npm install报错问题解决总结

    目录 前言 常见的有以下多种情况 总结 前言 很多时候安装npm install 的时候并不能直接将当前的node_modules直接一键安装到本地. 总是会出现各种各样的报错 常见的有以下多种情况 tip1:本地node 跟npm 版本不匹配,项目创建者当时的版本为14 ,而新开发者本地node默认为最新需要重新降低版本,使用cmd打开查看本地node和npm版本,询问一下同事的版本,直接去node官网重新 下载安装新的node安装包即可,或者如果本地有多个新老项目为了方便的管理各个node的

  • 详解vue-class迁移vite的一次踩坑记录

    目录 what happen 探究 解决 总结 what happen 最进项目从 vue-cli 迁移到了 vite,因为是 vue2 的项目,使用了 vue-class-component类组件做 ts 支持.当然迁移过程并没有那么一帆风顺,浏览器控制台报了一堆错,大致意思是某某方法为 undefined,无法调用.打印了下当前 this,为 undefined 的方法都来自于 vuex-class 装饰器下的方法.这就是一件很神奇的事,为什么只有 vuex-class 装饰器下的方法才会为

  • 关于Vue3过渡动画的踩坑记录

    关于Vue3过渡动画的踩坑记录

    目录 背景 问题定位 进一步分析 总结 背景 在我的 <Vue 3 开发企业级音乐 App>课程问答区,有个同学提了个问题,在歌手列表到歌手详情页面到转场动画中,只有进入动画,却没有离场动画: 该学生确实在这个问题上研究了有一段时间,而且从他的描述,我一时半会儿也想不出哪有问题,于是让他把代码传到 GitHub 上,毕竟直接从代码层面定位问题是最靠谱的. 问题定位 一般遇到此类问题的时候,我的第一反应是他用的 Vue 3 版本可能有问题,毕竟 Vue 3 还在不断迭代过程,某个版本有一些小 b

  • 详解element-ui 组件el-autocomplete使用踩坑记录

    详解element-ui 组件el-autocomplete使用踩坑记录

    项目遇到一个比较麻烦的需求,保存用户填写的历史记录,项目使用的element-ui,自然就使用了el-autocomplete组件,然后就是各种踩坑,以下记录以下写代码过程中遇到的问题 createFilter(queryString, filed) { console.log("createFilter==" + queryString) return (item) => { switch (filed) { case 'cardNum': break case 'cardPa

  • 详解vue-socket.io使用教程与踩坑记录

    详解vue-socket.io使用教程与踩坑记录

    目录 前言 我遇到的问题 使用教程 安装 引入(main.js) 使用(Page.vue) 解决方案 结合connect事件+store+路由守卫实现拦截 请先允许我狠狠吐个槽:vue-socket.io相关中文博客实在太少太少,来来去去就那么几篇,教程也比较零散,版本也比较老,就算我有暴风式搜索还是找不到解决问题的方案,然后我怒了,开始看源码.写测试demo.几乎把相关的issues都看了一遍,折腾1天后终于...搞定了,下面总结一下~ 考虑到很多小伙伴看完文章还是一头雾水或者无法复现方案,附

  • .net core 3.1在iis上发布的踩坑记录

    前言 写这篇文章的目的是希望像我一样喜欢.net 的人在发布 core到 iis上时少走点弯路 网上找了些资料,其实实际操作比较简单,就是有几个坑很恶心 踩坑记录 首先是你的服务器需要有core 的运行环境,安装前先关闭iis dotnet-hosting-3.1.4-win.exe 可以去微软的官网找最新的版本(去微软的官网找你要的版本就好了) 安装成功后,第一个坑出现了,启动iis,发现原来在iis上的网站都报503错误了. 直接玩大了,最后发现就是这个东西搞的鬼,你卸载它iis之前的网站就

  • JavaScript深拷贝的一些踩坑记录

    JavaScript深拷贝的一些踩坑记录

    前言 之前去一家公司面试的时候,面试官问了我一个问题,说:"如何才能深拷贝一个对象".当时我心里有些窃喜,这么简单的问题还用想吗?于是脱口而出:"平时常用的有两种办法,第一种用JSON.parse(JSON.stringify(obj)),第二种可以使用for...in加递归完成".面试官听了以后点了点头觉得挺满意的. 当时我也并没有太过在乎这个问题,直到前段时间又想起这个问题,发现上面说的两种方法都是有Bug的. 提出问题 那么上面所说的Bug是什么呢? 特殊对象

随机推荐