[Vue warn]:렌더 오류: "TypeError: 정의되지 않은 'products' 속성을 읽을 수 없습니다."
콘솔 탭에서 이 오류가 발생했습니다.
[Vue warn]:렌더 오류: "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>
이 문제는 종종 구성 요소가 이전에 렌더링될 때 발생합니다.serverData
사용할 수 있습니다.상태에서 이 변수를 먼저 시작해야 합니다.다음과 같은 것:
state: {
serverData: {
bestsellerProducts: {products: []},
latestProducts: {products: []},
}
}
분리하는 것을 추천합니다.bestSellerProducts
그리고.latestProducts
부터serverData
.
또한 구성 요소 내부에서 소품을 올바르게 취급해야 합니다.속성 검증에 대한 Vue 문서를 참조하십시오.
둘 중 하나인 것 같습니다.bestsellerProducts
또는latestProducts
을 가지고 있지 않습니다.products
기여하다.이 두 가지 항목에 대한 값을 게시해 주시면 더 나은 답변을 드릴 수 있을 것 같습니다.
렌더링 후 배열로 이동하시겠습니까?
이 방법은 일종의 게토이지만:
오류가 해당 텍스트를 포함하는 경우 오류 핸들러를 만들 수 있습니다. 그렇지 않으면 console.error() 함수를 반환합니다.
언급URL : https://stackoverflow.com/questions/55979824/vue-warn-error-in-render-typeerror-cannot-read-property-products-of-unde
'programing' 카테고리의 다른 글
Spring Boot 애플리케이션 구성에서 Spring Cloud {cipher}를 사용하는 방법이 있습니까? (0) | 2023.07.17 |
---|---|
타임스탬프에서 T와 Z는 정확히 무엇을 의미합니까? (0) | 2023.07.17 |
Pandas/Python에서 열을 필터링하기 위해 loc을 사용하는 것과 대괄호만 사용하는 것의 차이점은 무엇입니까? (0) | 2023.07.17 |
파이썬 인터프리터 셸에서 마지막 명령을 반복하는 방법은 무엇입니까? (0) | 2023.07.17 |
Python의 Very Long If 문 (0) | 2023.07.17 |