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>