美文网首页
vue报错:TypeError: Cannot read pro

vue报错:TypeError: Cannot read pro

作者: 黑白说程序 | 来源:发表于2020-10-21 22:29 被阅读0次
TypeError: Cannot read property 'length' of undefined
    at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?
{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"70de47a1-vue-loader-
template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-
loader/dist/cjs.js?!./node_modules/vue-
loader/lib/index.js?!./src/views/Detail/childdetail/DetailGoodNote.vue?
vue&type=template&id=73e21576& (2.js:93), <anonymous>:13:42)

这是因为异步加载数据没有加载完,就在组件使用length属性,此时data数据为空,导致的错误

解决的方式:

在最外面的div使用vif做一个判断,如果这个data属性有值,才执行渲染html元素
对象可以使用object.keys(obj)来判断是否有值

<template>
 <div v-if="Object.keys(Gooddetailnote).length !== 0">  <!-- 判断是否有值才渲染下面的html -->
    <h1>{{ Gooddetailnote.title }}</h1>
    <div>{{ Gooddetailnote.price }}</div>
    <div>
      <span>
        {{ Gooddetailnote.columns[0] }}
      </span>
      <span>
        {{ Gooddetailnote.columns[1] }}
      </span>
      <span>{{ Gooddetailnote.services[Gooddetailnote.services.length-1].name }}</span>
    </div>
    <div>
      <span v-for="index in Gooddetailnote.services.length-1" :key="index">
        <img :src="Gooddetailnote.services[index].icon" alt="" />
        {{ Gooddetailnote.services[index].name }}
      </span>
    </div>
  </div>
</template>

相关文章

网友评论

      本文标题:vue报错:TypeError: Cannot read pro

      本文链接:https://www.haomeiwen.com/subject/eorymktx.html