상위 페이지에 속하는 Nuxtjs 페이지 구성 요소에 정의되지 않은 변수입니다.
이 두 가지 경로가 있습니다./services
그리고./services/parents
각 페이지는 1장당 1장당 1장에 저장됩니다.vue
다음과 같은 파일:
// 파일 위치: "/pages/services/index.vue"
<tr v-for="service in services" :key="service.id">
<td class="check-col"><input type="checkbox"></td>
<td class="number-col">{{ service.id }}</td>
<td>{{ service.name }}</td>
<td>{{ service.slug }}</td>
<td>
<template v-if="service.children.length">
<template v-for="(child, index) in service.children">
<nuxt-link :to="'/admin/services/' + child.id" :key="child.id">
{{ child.name }}
</nuxt-link>
<span :key="child.id" v-if="(index+1) < service.children.length">, </span>
</template>
</template>
<span v-else>--</span>
</td>
</tr>
그리고 내 안에/services/parents
페이지, 나는 다음을 가지고 있다:
// 파일 위치: "/pages/services/parents.vue"
<tr v-for="service in services" :key="service.id">
<td>{{ service.id }}</td>
<td>{{ service.name }}</td>
</tr>
<script>
export default{
computed: {
services() {
return this.$store.getters['content-lists/services/list']
}
},
async fetch({ store, query }) {
let page = Number(query.page) || 1
let perPage = Number(store.getters['content-lists/services/perPage'])
let offset = (page - 1) * perPage
const max = await strapi.request('get', '/services/count')
store.commit('content-lists/services/setMaxPages', max)
store.commit('content-lists/services/empty')
const response = await strapi.request('post', '/graphql', {
data: {
query: `query {
services(limit: ${perPage}, start: ${offset}) {
id
name
slug
children {
id
name
}
}
}`
}
})
response.data.services.forEach((service) => {
store.commit('content-lists/services/add', {
id: service.id || service._id,
...service
})
})
}
}
</script>
부모 페이지로 이동하면 다음 오류가 나타납니다.
service.children은 정의되어 있지 않습니다.
페이지를 렌더링하는 동안 오류가 발생했습니다.자세한 내용은 개발자 도구 콘솔을 참조하십시오.
이 동작은, 를 사용해 네비게이트 할 때만 발생합니다.<nuxt-link>
브라우저 주소에 URL을 입력하면 정상적으로 작동합니다.콘솔도 확인했지만 트레이스는 없습니다.Type error: service.children is not defined
아무쪼록 잘 부탁드립니다.
언급URL : https://stackoverflow.com/questions/54439060/undefined-variable-in-nuxtjs-page-component-which-belongs-to-a-parent-page
'programing' 카테고리의 다른 글
폴링과 셀렉트의 차이점은 무엇입니까? (0) | 2022.08.15 |
---|---|
VueX 변환 최적화 (0) | 2022.08.15 |
콘솔 주의: v-for로 렌더링된 구성 요소 목록에 명시적 키가 있어야 함 (0) | 2022.08.15 |
Vue 구성 요소 이름은 소문자여야 합니까? (0) | 2022.08.15 |
java.displaces를 클릭합니다.Out Of Memory Error: GC 오버헤드 제한을 초과했습니다. (0) | 2022.08.15 |