如何解决[Vue警告]:渲染错误:“ TypeError:无法读取未定义的属性'xxx'”
在我的网站的控制台中,看到以下错误:
vue.esm.js?a026:628 [Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined"
found in
---> <ApiInstellingen> at src/views/settings/analytics.vue
<Anonymous>
<CWrapper>
<TheContainer> at src/containers/TheContainer.vue
<App> at src/App.vue
<Root>
我已经在互联网上看到许多类似的问题,并且我知道这与我尝试在呈现数据之前访问数据这一事实有关。我发现的解决方案似乎都没有帮助我。
这是我的代码:
<template>
<div>
<p> {{allAnalytics[0].id}} </p>
</div>
</template>
<script>
import { mapGetters,mapActions } from "vuex";
export default {
name: "apiInstellingen",methods: {
...mapActions(['fetchAnalytics'])
},created() {
this.fetchAnalytics();
},computed: mapGetters(['allAnalytics']),};
</script>
有人知道适合我的解决方案吗?我尝试了v-if,声明了状态,声明了数据中的变量,但似乎都没有用...
谢谢!
解决方法
从错误消息中我们可以了解到的是,allAnalytics
数组在模板渲染时实例化,但其中没有任何内容。
我认为,如果将v-if="allAnalytics.length > 0
放在模板的父div上,则不会看到此错误。但更重要的是,您应该问自己“此allAnalytics
数组是否为零长度?”
也许您需要向子v-for
标记添加<p>
指令以迭代allAnalytics
数组,如下所示。当然,这取决于您的用例。
<template>
<div>
<p v-for="item in allAnalytics" :key="item.id" > {{item.id}} </p>
</div>
</template>
,
这是因为您的allAnalytics
数组在使用时是未定义的(提取尚未完成),因此您无法访问0索引。
您可以添加这样的渲染条件
<template>
<div>
<p v-if"allAnalytics && allAnalytics[0]"> {{allAnalytics[0].id}} </p>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。