[Vue warn]: 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>

我在互联网上看到过很多类似的问题，我知道这与我在数据呈现之前尝试访问数据有关。 None 我找到的解决方案似乎对我有所帮助。

这是我的代码：

<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，在状态中声明，在数据中声明变量，但是 none 似乎有效...

谢谢！

Answer 1

我们可以从错误消息中了解到，您的 allAnalytics 数组在模板呈现时被实例化，但它没有任何内容。

我认为如果您将 v-if="allAnalytics.length > 0 放在模板中的父级 div 上，您将不会看到此错误。但更重要的是，您应该问自己“这个 allAnalytics 数组应该是 zero-length 吗？”

也许您需要向子 <p> 标记添加 v-for 指令以迭代 allAnalytics 数组，如下所示。当然，这取决于您的用例。

<template>
    <div>
        <p v-for="item in allAnalytics" :key="item.id" > {{item.id}} </p>
    </div>
</template>

Answer 2

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

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

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

[Vue warn]: Error in render: "TypeError: Cannot read property 'xxx' of undefined"

[Vue warn]: Error in render: "TypeError: Cannot read property 'xxx' of undefined"

error-handling

console

typeerror

vue.js

vuex