时间戳

首页 > 解决方案 > [Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性‘xxx’”

vue.js - [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，在状态中声明，在数据中声明变量，但似乎都不起作用......

谢谢！

标签： vue.jserror-handlingconsolevuextypeerror

解决方案

这是因为您的allAnalytics数组在您使用它时未定义（获取尚未完成），因此您无法访问 0 索引。

您可以像这样添加渲染条件

<template>
<div>
    <p v-if"allAnalytics && allAnalytics[0]"> {{allAnalytics[0].id}} </p>
</div>

推荐阅读