×

浅谈下vue里面的变量为undefined的问题

作者:Web前端之家2020.02.25来源:Web前端之家浏览:2171评论:0
关键词:vuejsundefined
微信公众号

微信公众号

500.jpg

对于vue的初学者,会遇到很多问题,这些源于对vuejs的基本用法不了解,最多的就是变量的未定义,遇到最多的主要是两种吧,比如:"TypeError: Cannot read property 'raise' of undefined",还有"TypeError: Cannot read property '0' of undefined"。

在此我分别谈谈这两种的解决方法。

TypeError: Cannot read property 'raise' of undefined

如果在console里调试的时候,遇到这种错误提示,首先大家不要慌张,静下心来分析分析。

出现该错误的原因是因为你花括号中的某些属性未定义。很有可能是因为你写错了属性名称,要么还有一种情况就是:

异步请求获取数据时,由于数据是异步获取的,所以一开始是没有该数据属性的,这种情况下也会报这种错误。

比如说我这里有一个数据detaildata,初始值为一个空对象。{{detaildata.name}}是不会报错的,但是,{{detaildata.info.name}}这样就会报错了。这是为什么呢?

因为,detaildata.info已经是一个undefined了,你undefined.name就肯定会报错了。

所以在初始化时,info属性赋值为空对象就行了。如下代码:

return{
    book:{ //创建空对象
        info:{}
    }
}

虽然这种方法很实用,但是我们还是要按照规范来写数组变量的应用。

聊完变量的未定义后,接下来我们再分享下另外一种错误提示,go on.....

TypeError: Cannot read property '0' of undefined

这个提示跟上面的区别就是变量换成了"0",当然解决方法也会有所不同。我就拿早期做的一个项目来演示如何解决的。先看个错误提示图:

QQ截图20200225212834.jpg

再看下源码:

<!-- 买卖Btn -->
<div class="buysell-btn">
    <div class="buysell-item tbuy-btn" :class="[currentySym.raise > 0 ? 'red' : 'green']">
        <span>买入价</span>
        <strong>{{currentySym.tick_deep[0].price_bid?(currentySym.tick_deep[0].price_bid)/Math.pow(10, currentySym.digits):"--"}}<em :class="currentySym.raise>0 ? 'up': currentySym.raise<0 ? 'down': ''"></em></strong>
    </div>
    <div class="buysell-item tsell-btn" :class="[currentySym.raise > 0 ? 'red' : 'green']">
        <span>卖出价</span>
        <strong>{{currentySym.tick_deep[0].price_ask?(currentySym.tick_deep[0].price_ask)/Math.pow(10, currentySym.digits):"--"}}<em :class="currentySym.raise>0 ? 'up': currentySym.raise<0 ? 'down': ''"></em></strong>
    </div>
</div>

首先我们定位到此段代码用到几个数字”0“进行了判断,如何取排查是哪个”0“出现了报错,可以栓选法,先注释其他,从currentySym.raise > 0 ? 'red' : 'green'开始,我们发现只保留这段判断也是有问题的,其实VUE里面是不建议这样写的,不规范(至于为什么,在此不多说,也可以取查询官方文档,想了解的可以加QQ群咨询)。于是进行了进一步的判断优化,试着加了一段,如下代码:

:class="[(currentySym.raise !== undefined&&currentySym.raise > 0) ? 'red' : 'green']"

再看看console里,发现错误没了,就是这么神奇。我们再来看段代码:

if(res.Data){
    if(res.Data.length == 1){
        this.tableData1 = res.Data[0];
    }
}

对于很多初学者来,往往忽略if(res.Data),如在js中使用时发现length报错,报错原因就是res.Data是无数据为undefined的,找不到 res.Data.length,所以我们必须在外面加层判断。

OK,排除了第一段代码问题后,发现还是有报错,接下来分析下:

<strong>{{currentySym.tick_deep[0].price_bid?(currentySym.tick_deep[0].price_bid)/Math.pow(10, currentySym.digits):"--"}}</strong>

这里的报错原因是tick_deep[0],如何解决呢,因时间关系直接教大家一招,在父级元素加一个v-if判断。如下:

<strong v-if='currentySym.tick_deep'>{{currentySym.tick_deep[0].price_bid?(currentySym.tick_deep[0].price_bid)/Math.pow(10, currentySym.digits):"--"}}</strong>

这样报错就解决了。注:不建议以上的取变量方法,我们最好把这段写在函数里,然后再return

总结

对于vuejs,当你入门后,发现还是很好玩的,比起其他2种热门框架,容易上手,并且基本都能实现各种需求,并且现在跟VUE的前端框架也有很多了,还犹豫啥,赶紧行动吧!!

如果您有任何问题,都可以加我们群讨论,非诚勿扰,一起学习吧!!!!

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/vue20200225.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2020 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.0 Valyria

时时彩平台哪个好 快乐双彩今晚开奖公告 嘉盛配资 江西11选5开奖结果 排列五预测专家精准 宁夏十一选五电子走势图 山东快乐扑克3开奖结果 吉林快三官方下载 近期股票行情如何 吉林快3网站平台 低于发行价的股票 正好网黑龙江11选5开奖结果 快乐12高手追号技巧 吉林11选5任选3技巧 福建快三中奖助手 国内有正规的股票配资平台吗 安徽快三选号简易技巧