title: Vue.js. Cannot loop multiple table rows at the same time
body: <p>I am trying to loop through an array and create <strong>2</strong> rows in a table.</p>
  
  <p>Here is my desired output:</p>
  
  <p><a href="https://i.stack.imgur.com/oM9uU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oM9uU.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;tbody&gt;
  &lt;tr&gt;
    &lt;td&gt;col 1&lt;/td&gt;
    &lt;td&gt;col 2&lt;/td&gt;
    &lt;td&gt;col 3&lt;/td&gt;
    &lt;td&gt;col 4&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td colspan="4"&gt;col 5 (This is a reall long 4 colspan row..................)&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>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: </p>
  
  <pre><code>&lt;tr v-for="(data, index) in messages" :key="index"&gt;
  </code></pre>
  
  <p>However, that only accounts for the first <code>tr</code>. </p>
  
  <p>How can I get that loop to account for 2 rows. I considered wrapping the <code>tr</code> in a div but that would not be semantically correct. </p>
  
  <p>Edit: Using <code>template</code> tag. </p>
  
  <pre><code>&lt;template v-for="data in messages"&gt;
        &lt;tr&gt;
          &lt;td&gt;col 1&lt;/td&gt;
          &lt;td&gt;col 2&lt;/td&gt;
          &lt;td&gt;col 3&lt;/td&gt;
          &lt;td&gt;col 4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td colspan="4"&gt; col 5&lt;/td&gt;
        &lt;/tr&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I am now getting two errors on both the <code>tr</code> tags that say</p>
  
  <blockquote>
    <p>Elements in iteration expect to have 'v-bind:key' directives</p>
  </blockquote>
  
  <p>When I add that to one, I get an error on the other. When I add it to both I get duplicate key error. </p>