How to target object for v-for

Question

created() {
  const currentActivity = this.$store.getters.currentActivity
  const activity = currentActivity.activity
}

The object I want to loop through its properties, is activity. Its content displays fine in the console. Inside the template I have:

<ul>
  <li v-for="value in activity" :key="value.id">
    {{ value.activity.activityName }}
    {{ value.related_Activity }}
  </li>
</ul>

Inside data():

return {
  activity: activity
}

But the console says: "activity is not defined" I tried this.activity, no errors in console but it doesn't display anything on the page. So, how to refer the the activity object?

Answer 1

Very close to @RenatoManalili answer.

this.currentActivity = currentActivity did the job.

Also, I update the template code as so:

<ul v-for="value in currentActivity" :key="value.id">
  <li>{{ value.activity.activityName }}</li>
  <li>{{ value.related_activity }}</li>
</ul>
``` because it wasn't properly displaying the list.
Thank you.