vue.js 的 v-for列表渲染问题

Question

<tbody id="show-blog-type-module" onclick="return clickTr(event)" >
			<tr v-for="(blogType,index) in blogTypes">
				<td>{{index++}}</td>
				<td>{{blogType.id}}</td>
				<td>{{blogType.name}}</td>
				<td>{{blogType.detail}}</td>
				<td>{{blogType.blogs.length}}
					<a class="pointer" v-on:click="showBlogs">
						<span class="glyphicon glyphicon-resize-full"></span>
					</a>
				</td>
				<td>
					<a class="pointer">
						<span class="glyphicon glyphicon-edit"  title="编辑"></span>
					</a>
				</td>
				<td>
					<a :href="'manager/blogType/delete?id='+blogType.id">
						<span class="glyphicon glyphicon-trash" title="删除"></span>
					</a>
				</td>
				<td>
					<a :href="'blog/type?id='+blogType.id">
						<span class="glyphicon glyphicon-link" title="浏览"></span>
					</a>
				</td>
			</tr> 
  		</tbody>

我想在这个循环的tr中做一个手风琴的效果，如果想在表格中用v-for一次渲染两列

<xxx v-for="(blogType,index) in blogTypes">
    <tr></tr>
    <tr></tr>
</xxx>

但是这样会vue报错 v-for 不会渲染

应为浏览器识别不了xxx标签。

敢问各位大侠有什么好方法吗？

Answer 1

使用template标签看看<template v-for="(blogType,index) in blogTypes">     <tr></tr>     <tr></tr> </template>