[Vue warn] :렌더 오류: "TypeError: _vm.activity.activity가 정의되지 않았습니다."
이 VueJS 컴포넌트를 사용하면 오류가 발생합니다.[Vue warn]: Error in render: "TypeError: _vm.activity.activity is undefined"
<template>
<div class="activity box">
<h1>{{activity.activity.title}}</h1>
<div>
</div>
<h2>{{activity}}</h2>
</div>
</template>
<script>
let activity = {}
export default {
data () {
return {
activity
}
},
methods: {},
created: function () {
this.$store.dispatch('show_activity', {params: {id: this.$route.params.id}}).then(activity => {
this.activity = activity.data
}, response => {
})
}
}
</script>
회선<h1>{{activity.activity.title}}</h1>
이 에러의 원인이 되고 있습니다.로 바꾸면<h1>{{activity}}</h1>
페이지가 올바르게 로드됩니다.이상한 점은 첫 번째가 실제로는 정상적으로 페이지에 제목을 로드하지만 JS 오류가 발생하여 페이지의 다른 js가 제대로 실행되지 않는다는 것입니다. activity
로딩된 JSON 객체입니다.vuex_rest_api
이 라인은 정상적으로 동작하는데 왜 에러가 발생하는지 알 수 없습니다.
그 이후로는activity
속성을 구성하지 않는 일부 데이터를 가져와 개체가 비동기적으로 설정됩니다.activity
템플릿에 액세스하려고 할 때 inside로 이동합니다.
데이터를 가져온 후에 렌더링하는 것이 좋습니다.따라서 a를 사용합니다.v-if
지시:
<h1 v-if="activity.activity">{{activity.activity.title}}</h1>
데이터가 로드되고 있음을 사용자에게 알리는 일종의 로드를 보여 주는 것이 좋습니다.
<h1 v-if="activity.activity">{{activity.activity.title}}</h1>
<p v-else> loading.....</p>
초기값(예: null)을 설정할 필요가 있습니다.data
섹션 및 템플릿을 변경하여 다음 중 하나를 확인합니다.activity
실제로는 오브젝트이며 지정된 키가 정의되어 있습니다.
<template>
<div class="activity box">
<h1>{{activity && activity.activity ? activity.activity.title : 'Loading ...'}}</h1>
<div></div>
<h2>{{activity}}</h2>
</div>
</template>
<script>
let activity = {}
export default
{
data ()
{
return
{
activity:{}
}
},
methods: {},
created: function ()
{
this.$store.dispatch('show_activity',
{
params:
{
id: this.$route.params.id
}
}).then(activity =>
{
this.activity = activity.data
});
}
}
</script>
언급URL : https://stackoverflow.com/questions/51536344/vue-warn-error-in-render-typeerror-vm-activity-activity-is-undefined
'programing' 카테고리의 다른 글
반응성을 트리거하지 않고 Vuex 상태 차이를 계산하는 방법 (0) | 2022.07.10 |
---|---|
라우터에 데이터를 삽입하려면 어떻게 해야 합니까?각 vuejs 컴포넌트 전에? (0) | 2022.07.10 |
C 헤더 파일 및 컴파일/링크 (0) | 2022.07.10 |
Vue.js: 동적으로 작성된HTML에서 범위 CSS를 사용하려면 어떻게 해야 합니까? (0) | 2022.07.10 |
Git Bash에 SSH 키 파일 표시 (0) | 2021.01.18 |