javascript - Vue.js。无法同时循环多个表行

Question

我正在尝试循环遍历数组并在表中创建 2 行。

这是我想要的输出:

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

但是，我似乎在 Vue JS 中陷入困境。如果我正确阅读文档，则循环和重复元素的方法将是执行以下操作:

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

但是，这仅占第一个tr。

如何让该循环占 2 行。我考虑过将 tr 包装在 div 中，但这在语义上不正确。

编辑:使用template标签。

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

我现在在两个 tr 标签上收到两个错误，内容为

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

当我将其添加到一个时，另一个上出现错误。当我将它添加到两者时，我收到重复的 key 错误。

Answer 1

official way是将您的行包装在 <template> 中标签。

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>