[Vue warn]: Error in render: "TypeError: _vm.activity.activity is undefined"

Question

I have this VueJS component that is giving me the error [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>

The line <h1>{{activity.activity.title}}</h1> is causing the error. If I change it to <h1>{{activity}}</h1> the page loads fine. The strange thing is the first one actually loads the title on the page just fine but the JS error raised causes other js on the page to not run properly. activity is a JSON object loaded from vuex_rest_api

I can't work out why this line is raising an error when it renders fine.

Answer 1

Since the activity object is set asynchronously by fetching some data it does not consist the property activity inside when the template is trying to access it.

It's better to render it after the data is fetched. So use a v-if directive as:

<h1 v-if="activity.activity">{{activity.activity.title}}</h1>

It would be better if you showed some sort of loading to indicate the user that the data is being loaded.

<h1 v-if="activity.activity">{{activity.activity.title}}</h1>
<p v-else> loading.....</p>