Reputation: 405
I got this error in console tab.
[Vue warn]: Error in render: "TypeError: Cannot read property 'products' of undefined"
My code works normally but I don't know why that error shows up. I think it because the DOM has rendered first then my data was populated after that. Is that true? If yes, how can I fix it?
Here is my component:
<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>
Upvotes: 1
Views: 4154
Reputation: 304
This often happens when your component renders before serverData
is available. You should init this variable first in your state. Something like:
state: {
serverData: {
bestsellerProducts: {products: []},
latestProducts: {products: []},
}
}
I'd recommend separating bestSellerProducts
and latestProducts
from serverData
.
Also make sure you handle props properly inside components. See Vue Document on Props Validation.
Upvotes: 1
Reputation: 101
This method is kind of ghetto but:
You could make an error handler then if the error contains that text return the function otherwise console.error() it.
Upvotes: 0
Reputation: 101
It looks like either bestsellerProducts
or latestProducts
doesn't have a products
attribute. If you could post the value for these two items I'd be able to give you a better answer.
Are you pushing to the array after the render?
Upvotes: 0