[Vue warn]: Ошибка при рендеринге: «Ошибка типа: Не удается прочитать свойство 'products' of undefined"

Question

Я получил эту ошибку на вкладке консоли.

[Vue warn]: ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство 'products' of undefined"

Мой код работает нормально, но я не знаю, почему появляется эта ошибка. Я думаю, потому что сначала 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

Этот метод является своего рода гетто, но:

Тогда вы можете создать обработчик ошибок, если ошибка содержит этот текст, вернуть функцию, в противном случае console.error () it.

Answer 3

Похоже, что либо bestsellerProducts, либо latestProducts не имеет атрибута products. Если бы вы могли опубликовать значение для этих двух пунктов, я мог бы дать вам лучший ответ.

Вы выдвигаете массив после рендера?