如何对计算对象中的数组使用“v-for”

Question

我正在创建一个网站来列出我的所有项目。我正在使用 Vuex 和 Firebase 来存储我的所有数据。

我希望每个项目都有自己的“待办事项列表”。 当我创建一个新项目时，我创建了一个数组，它是我的待办事项列表。在 Firebase 中，它看起来像这样：Screenshot of 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 中使用计算的道具，但这不起作用。 不确定我是否理解计算属性的含义。我可以在 data () 中定义 projects () 吗？并将 getter 链接到数据？

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

当您创建循环时，在本例中，project 是数组的单个元素，因此 project.todos 是该特定项目的待办事项列表。

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