How to use "v-for", for array in computed object

Question

I am creating a website to list all of my projects. I am using Vuex and Firebase to store all my data.

I want each project to have its own "todo-list". When I create a new project, I create an array witch is my todo-list. In Firebase it looks like this: Screenshot of Firebase

Now I want to display a list of my projects. First I get my projects as a computed prop like this:

<script>
export default {

  computed: {
    projects () {
      return this.$store.getters.loadedProjects
    }
  },
  created () {
    this.$store.dispatch('loadProjects')
  },
}

</script>

I can loop through projects and display the title for each project.

My question is: how do I loop through the todo-array inside the computed prop?

<template>
  <div v-for="project in projects" :key="project.id">
    <p>{{ project.title }}</p>
    
    <!-- Looping through todos (array) in an computed prop -->
    <div v-for="(todo, index) in todos" :key="todo.id">
      <p>{{ project.todos[index].title }} </p>
      <p>{{ project.todos[index].completed }} </p>
    </div>
    
  </div>
</template>

Tried to use the computed prop inside v-for, but that does not work. Not sure if I understand the meaning of computed properties. Could I just define projects () inside data () ? and link the getter to the data?

<div v-for="todo in {{project.todos}} :key="todo.id>

tony19 · Accepted Answer · 2022-07-15 04:18:17Z

1

If the second loop is inside the first one, you could access it this way:

<template>
  <div v-for="project in projects" :key="project.id">
    <p>{{ project.title }}</p>
    
    <!-- Looping through todos (array) in an computed prop -->
    <div v-for="todo in project.todos" :key="todo.id">
      <p>{{ todo.title }} </p>
      <p>{{ todo.completed }} </p>
    </div>
    
  </div>
</template>

When you create a loop, in this case, project is a single element of the array, so project.todos is the list of todos of that specific project.

https://v2.vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for

edited Jul 15, 2022 at 4:18

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 3, 2019 at 12:07

Joao Paulo

1998 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr. Wilhelm Over a year ago

Thank you so much! I have googled sooo long for this

Joao Paulo Over a year ago

I'm glad I could help. The official documentation of vue.js is quit good, I let it open all the time just in case.

Collectives™ on Stack Overflow

How to use "v-for", for array in computed object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related