Vue.js. Cannot loop multiple table rows at the same time

Question

I am trying to loop through an array and create 2 rows in a table.

Here is my desired output:

<tbody>
<tr>
  <td>col 1</td>
  <td>col 2</td>
  <td>col 3</td>
  <td>col 4</td>
</tr>
<tr>
  <td colspan="4">col 5 (This is a reall long 4 colspan row..................)</td>
</tr>

However, I seem to be getting stuck with doing this in Vue JS. If I am reading the docs correctly the way to loop through and repeat elements would be to do something like this:

<tr v-for="(data, index) in messages" :key="index">

However, that only accounts for the first tr.

How can I get that loop to account for 2 rows. I considered wrapping the tr in a div but that would not be semantically correct.

Edit: Using template tag.

<template v-for="data in messages">
      <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
      </tr>
      <tr>
        <td colspan="4"> col 5</td>
      </tr>
</template>

I am now getting two errors on both the tr tags that say

Elements in iteration expect to have 'v-bind:key' directives

When I add that to one, I get an error on the other. When I add it to both I get duplicate key error.

What is the structure of messages? please put an example of them. — talkhabi
– talkhabi, Commented Sep 14, 2019 at 8:33

tony19 · Accepted Answer · 2022-07-15 01:02:38Z

3

The official way would be to wrap your rows in a <template> tag.

https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

//
var vm = new Vue({
  el: '#app',
  data() {
    return {
      messages: [{
        col1: '1',
        col2: '2',
        col3: '3',
        col4: '4',
        col5: '5'
      },{
        col1: 'a',
        col2: 'b',
        col3: 'c',
        col4: 'd',
        col5: 'e'
      }]
    }
  }
});

<div id="app">
  <table border="1">
    <tbody>
      <template v-for="(data, index) in messages" :key="index">
       <tr>
         <td>{{ data.col1 }}</td>
         <td>{{ data.col2 }}</td>
         <td>{{ data.col3 }}</td>
         <td>{{ data.col4 }}</td>
       </tr>
       <tr>
         <td colspan="4">{{ data.col5 }}</td> 
       </tr>
     </template>
    </tbody>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>

edited Jul 15, 2022 at 1:02

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 14, 2019 at 7:04

Lawrence Cherone

46.7k7 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

JamesG Over a year ago

This still is not working, give me a few mins to update my post with messages.

JamesG Over a year ago

haha, not for me :( I had updated my answer. Btw, I appreciate your time and help. Thank you.

JamesG Over a year ago

I do not understand why your code works, When I use the exact same code I get "'<template>' cannot be keyed. Place the key on real elements instead"

Matt Aft Over a year ago

If you create a new component using everything you have in the template then it should work and not give you the "'<template>' cannot be keyed" warning

Lawrence Cherone Over a year ago

The warning/error your getting is from vetur, all roads lead to github.com/vuejs/vetur/issues/261

|

Collectives™ on Stack Overflow

Vue.js. Cannot loop multiple table rows at the same time

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related