Question

我在“控制台”选项卡中收到此错误。

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'products'”

我的代码正常工作，但我不知道为什么会出现该错误。我认为是因为DOM首先呈现，然后再填充我的数据。真的吗？如果是，该如何解决？

这是我的组成部分：

<template>
    <main role="main">

        <!--        <breadcrumbs></breadcrumbs>-->

        <slider></slider>
        <bestseller :products="serverData.bestsellerProducts.products"></bestseller>
        <categorized-products></categorized-products>
        <latest :products="serverData.latestProducts.products"></latest>

    </main>
</template>

<script>
    import Slider from './Slider';
    import Bestseller from './Product/Bestseller';
    import Latest from './Product/Latest';
    import CategorizedProducts from './ProductCategory/CategorizedProducts';
    import {mapGetters} from 'vuex';

    export default {
        computed: {
            ...mapGetters({
                serverData: 'getServerData'
            })
        },
        components: {
            Slider,
            Bestseller,
            Latest,
            CategorizedProducts
        }
    }
</script>

<style scoped>

</style>

Answer 1

当您的组件在serverData可用之前呈现时，通常会发生这种情况。您应该先在状态中初始化此变量。像这样：

state: {
    serverData: {
        bestsellerProducts: {products: []},
        latestProducts: {products: []},
    }
}

我建议将bestSellerProducts和latestProducts和serverData分开。

还要确保在组件内部正确处理道具。参见Vue Document on Props Validation。

Answer 2

看起来bestsellerProducts或latestProducts没有products属性。如果您可以发布这两项的价值，我将为您提供更好的答案。

渲染后您是否要推送到数组？

Answer 3

此方法有点像贫民窟，但：

您可以创建一个错误处理程序，如果错误包含该文本，则返回该函数，否则返回console.error（）。

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'产品'”

3 个答案: