[Vuejs]-How to loop element between tr and td in table with Vue?

by

2👍

✅

Use template which acts like an invisible wrapper

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

More better way would be

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

Or

   <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>
👤Beshambher Chaukhwan

1👍

Authors in different columns

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

Authors in same column:

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

Leave a comment