Как использовать «v-for», для массива в вычисляемом объекте

Question

Я создаю веб-сайт для перечисления всех моих проектов. Я использую Vuex и Firebase для хранения всех своих данных.

Я хочу, чтобы у каждого проекта был свой «список задач». Когда я создаю новый проект, я создаю массив с моим списком задач. В Firebase это выглядит так: Снимок экрана Firebase

Теперь я хочу отобразить список моих проектов. Сначала я получаю свои проекты как компьютерную опору, как это:

<script>
export default {

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

</script>

Я могу просматривать проекты и отображать заголовок для каждого проекта.

---

У меня такой вопрос: как мне пройти через todo-массив внутри вычисляемого пропа?

<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>

Пытался использовать вычисленную опору внутри v-for, но это не работает Не уверен, что я понимаю значение вычисляемых свойств. Могу ли я просто определить проекты () внутри данных ()? и связать геттер с данными?

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

Answer 1

Если второй цикл находится внутри первого, вы можете получить к нему доступ следующим образом:

<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>

Когда вы создаете цикл, в этом случае, проект является отдельным элементом массива, поэтому проект.todos - список задач этого конкретного проекта.

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