CODEWITHSUNDEEP
vuejs2v-for
theflucs
theflucs

Reputation: 227

How to target object for v-for

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?

Upvotes: 0

Views: 39

Answers (2)

theflucs
theflucs

Reputation: 227

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.

Upvotes: 1

Renato Manalili
Renato Manalili

Reputation: 488

Instead of using const activity = currentActivity.activity change it to this.activity = currentActivity.activity and then in your data return { activity: [] }

Upvotes: 2

Related Questions