vue中出现错误（“TypeError: Cannot read property ‘substring‘ of undefined“）

最新推荐文章于 2025-03-11 21:12:04 发布

Shaw_Fan

最新推荐文章于 2025-03-11 21:12:04 发布

阅读量1.3w

点赞数 11

分类专栏： vue 文章标签： vue.js 前端 vue

本文链接：https://blog.csdn.net/weixin_47700309/article/details/109194167

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

在Vue项目中，尝试动态渲染并使用substring截取字符串时遇到'TypeError: Cannot read property 'substring' of undefined'错误。问题源于未对数据源进行空值检查。为解决这个问题，可以在数据绑定前使用v-if指令进行判断，确保数据存在后再执行substring操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中，动态渲染数据时，截取(substring())字符串中的一段字符，出现错误（“TypeError: Cannot read property ‘substring’ of undefined”）

目的：截取 "2019-10-15T07:20:47.000Z"中的 2019-10-15，在文章中渲染

方法：利用字符串 substring()函数进行截取

函数：substring()
定义：substring(start,end)表示从start到end之间的字符串，包括start位置的字符但是不包括end位置的字符。
功能：字符串截取，比如想从"getUserDetails"中得到"getUser"就要用到substring(0,7)
如下：

<div class="time">{{current.create_date.substring(0,10)}}</div>
*控制台打印输出：*
console.log(this.current.create_date);    // 2019-10-15T07:20:47.000Z
console.log(this.current.create_date.substring(0,10));  //2019-10-15

虽说截取成功，但是出现了错误："TypeError: Cannot read property ‘substring’ of undefined"
错误展示

报错内容：“Cannot read property ‘substring’ of undefined”
报错原因：你没有判断数据来源是否为空。对字符串做substring时，没有判断其是否为空。
解决方式：在数据前面的标签里面进行判断 v-if=“字符串内容”

<div class="time">{{current.create_date.substring(0,10)}}</div>
报错：Cannot read property 'substring' of undefined"
修改：
<div class="time" v-if="current.create_date">{{current.create_date.substring(0,10)}}</div>