vue.js - [Vue警告] : Error in render: “TypeError: Cannot read property ' xxx' of undefined”

Question

在我的网站的控制台中，我看到以下错误:

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，声明了状态，声明了数据中的变量，但似乎都没有用...
谢谢!

Answer 1

这是因为您的allAnalytics数组在使用时是未定义的(提取尚未完成)，因此您无法访问0索引。
您可以像这样添加渲染条件

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