如何使用 v-for 以嵌套循环动态显示数据 table

Question

我有一个从我的条目文件中调用的 table 组件。 Table 组件获取作为 prop 传递的 documents 对象。在 table 组件中，我有一个 table，它应该将对象数据一个接一个地渲染，以便数据进入。每一行都应该有 User name、Document name 和date of view。（有关当前和预期结果，请参阅问题底部）。我遇到这个问题是因为对象的结构是 views 嵌套在 parent 中，我不知道如何循环访问外部对象以进入内部对象而不影响布局（因此使用 <span>）

对象：

data() {
    return {
      documents: [
        {
          id: 1,
          name: "Doc 1",
          date: "01.01.1995",
          doc_website: "linktodocument1.com",
          views: [
            {
              id: 4,
              user_name: "Jon",
              doc_id: 1,
              view_date: "01.02.1996",
            },
            {
              id: 1,
              user_name: "Bob",
              doc_id: 1,
              view_date: "05.02.1996",
            },
          ],
        },
        {
          id: 2,
          name: "Doc 2",
          date: "01.01.2000",
          doc_website: "linktodocument2.com",
          views: [
            {
              id: 1,
              user_name: "Bob",
              doc_id: 2,
              view_date: "01.02.1996",
            },
            {
              id: 1,
              user_name: "Jon",
              doc_id: 2,
              view_date: "05.02.1996",
            },
          ],
        },
        {
          id: 3,
          name: "Doc 3",
          date: "01.01.2000",
          doc_website: "linktodocument3.com",
          views: [
            {
              id: 1,
              user_name: "Bob",
              doc_id: 3,
              view_date: "01.02.1996",
            },
            {
              id: 1,
              user_name: "Jon",
              doc_id: 3,
              view_date: "05.02.1996",
            },
            {
              id: 3,
              user_name: "Rob",
              doc_id: 3,
              view_date: "05.02.1996",
            },
          ],
        },
      ],
    };
  },

条目文件：

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Document</th>
        <th>Date</th>
      </tr>
    </thead>
    <table-component :docObject="documents"></table-component>
  </table>
</template>

<script>
import tableComponent from "./table.vue";

export default {
  components: { tableComponent },
}
</script>

组件：

<template>
  <tbody>
    <span v-for="doc in docObject" :key="doc.name">
      <td v-for="view in doc.views" :key="view.id">
        <p>
          {{ view.user_name }}
        </p>
      </td>
      <td>
        <p>
          {{ doc.name }}
        </p>
      </td>
      <td v-for="view in doc.views" :key="view.name">
        <p>
          {{ view.view_date }}
        </p>
      </td>
    </span>
  </tbody>
</template>

<script>
export default {
  components: {},
  props: ["docObject"],
};
</script>

<style scoped>
td {
  padding: 15px 15px;
  border: 1px solid black;
}
</style>

Current Output: 
Name                                                   Document Date      
Jon Bob Doc 1 1.02.1996 05.02.1996
Bob Jon Doc 2 01.02.1996 05.02.1996
Bob Jon Rob Doc 3 01.02.1996 05.02.1996 05.02.1996

Expected Result:
Name             Document           Date
Jon               Doc 1            1.02.1996
Bob               Doc 1            05.02.1996
Bob               Doc 2            01.02.1996
Bob               Doc 2            05.02.1996
Bob               Doc 3            01.02.1996
Jon               Doc 3            05.02.1996
Rob               Doc 3            05.02.1996

Codesandbox link: https://codesandbox.io/s/zealous-cerf-rfmf2?file=/src/components/table.vue:0-585

Answer 1

你应该使用 template 而不是 span 并且没有必要使用多个 td 标签将其进一步复杂化，它可以像这样简单：

<template>
  <tbody>
    <template v-for="doc in docObject">
      <tr v-for="view in doc.views" :key="view.id">
        <td>{{ view.user_name }}</td>
        <td>{{ doc.name }}</td>
        <td>{{ view.view_date }}</td>
      </tr>
    </template>
  </tbody>
</template>

<script>
export default {
  components: {},
  props: ["docObject"],
};
</script>

<style scoped>
td {
  padding: 15px 15px;
  border: 1px solid black;
}
</style>

请检查这个codesanbox：https://codesandbox.io/s/nice-ives-b33u5?file=/src/components/table.vue

输出:

如何使用 v-for 以嵌套循环动态显示数据 table

How to use v-for to dynamically display data table with nested loops

javascript

vue.js

vue-component