programing

[Vue warn] :렌더 오류: "TypeError: _vm.activity.activity가 정의되지 않았습니다."

kingscode 2022. 7. 10. 18:54
반응형

[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

반응형