Cannot read properties of undefined (reading ‘0‘)“

最新推荐文章于 2025-02-26 15:13:19 发布

是小张朋友呀

最新推荐文章于 2025-02-26 15:13:19 发布

阅读量8.9k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/m0_49416118/article/details/122360894

版权

前端专栏收录该内容

34 篇文章

订阅专栏

本文介绍了Vue.js中遇到的一个渲染错误：`TypeError: Cannot read properties of undefined (reading '0')`。问题源于尝试访问未初始化的异步数据。解决方案是在相关组件中使用`v-if`指令来确保只有当数据加载完成后才进行渲染，从而避免了尝试访问未定义的属性导致的错误。

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

原代码：

<div class="shop-header-discounts">
      <div class="discounts-left">
        <div class="activity" :class="supportClasses[info.supports[0].type]">
        <span class="content-tag">
        <span class="mini-tag">{{info.supports[0].name}}</span>
        </span>
          <span class="activity-content ellipsis">{{info.supports[0].content}}</span>
        </div>
      </div>
      <div class="discounts-right">
        {{info.supports.length}} 个优惠
      </div>
    </div>

报错：[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined (reading ‘0’)” found in…
原因：异步显示先显示的初始数据，此时还没有数据
修改：<div class="shop-header-discounts" v-if="info.supports"> <div class="discounts-left"> <div class="activity" :class="supportClasses[info.supports[0].type]"> <span class="content-tag"> <span class="mini-tag">{{info.supports[0].name}}</span> </span> <span class="activity-content ellipsis">{{info.supports[0].content}}</span> </div> </div> <div class="discounts-right"> {{info.supports.length}} 个优惠 </div> </div>