如何使用Vue在表格中的tr和td之间循环元素？答案

【问题标题】：How to loop element between tr and td in table with Vue?如何使用Vue在表格中的tr和td之间循环元素？
【发布时间】：2021-06-08 02:37:17
【问题描述】：

对于 API 数据，它包括 posts 根项及其下方的数组。甚至还有一个数组设置在第一层数组中。

{
    "posts": [
        {
            "id": 1,
            "title": "T1",
            "authors": [
                {
                    name: "A"
                },
                {
                    name: "B"
                }
            ]
        },
        {
            "id": 2,
            "title": "T2",
            "authors": [
                {
                    name: "C"
                },
                {
                    name: "D"
                }
            ]
        }
    ]
}

想在Vue的html表中循环设置值

<template>
    <table>
        <tr v-for="(ps, key) in postList" v-if="key == 'posts'">
            <div v-for="p in ps">
                <td>{{ p.id }}</td>
                <td>{{ p.name }}</td>
                <td v-for="a in p.authors">{{ a.name }}</td>
            </div>
        </tr>
    </table>
</template>

<script>
import Vue from "vue"

export default Vue.extend({
  data() {
    return {
      postList: null,
    }
  },

  mounted() {
    this.$axios.get("/posts").then(response => { this.postList = response.data; });
  },
})
</script>

这种方式可以显示数据，但是由于在tr和td之间使用了div，所以数据在页面上显示不好。有没有循环它们的好方法？

【问题讨论】：

标签： json api vue.js for-loop html-table

【解决方案1】：

使用类似于隐形包装的模板

 <template v-for="p in ps"> ...  </template>

更好的方法是

    <table>
        <template v-for="(ps, key) in postList" v-if="key == 'posts'">
            <tr v-for="p in ps">
                <td>{{ p.id }}</td>
                <td>{{ p.name }}</td>
                <td v-for="a in p.authors">{{ a.name }}</td>
            </tr>
        </template>
    </table>

或者

   <table>
     <template v-if="postList && postList.posts">
        <template v-for="p in postList.posts">
            <tr :key="p.id">
                <td>{{ p.id }}</td>
                <td>{{ p.name }}</td>
                <td v-for="a in p.authors">{{ a.name }}</td>
            </tr>
        </template>
      </template>
   </table>

【讨论】：

【解决方案2】：

不同栏目中的作者

<table>
      <tr
        v-for="(record, recordIndex) in postList.posts"
        :key="recordIndex"
      >
      <td>{{record.id}}</td>
      <td>{{record.title}}</td>
      <td v-for="(author,authorIndex) in record.authors" :key="authorIndex">
        {{author.name}}
      </td>
      </tr>
 </table>

同一栏目中的作者：

<table>
      <tr
        v-for="(record, recordIndex) in postList.posts"
        :key="recordIndex"
      >
      <td>{{record.id}}</td>
      <td>{{record.title}}</td>
      <td>
        <template v-for="(author,authorIndex) in record.authors" >
        <span :key="authorIndex">{{author.name}} </span>
        </template>
      </td>
      </tr>
</table>

【讨论】：