我正在尝试循环遍历数组并在表中创建 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 错误。
最佳答案
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>
关于javascript - Vue.js。无法同时循环多个表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57933145/