Vue v-if and remove span - vue.js

Question

Im using folowing code to render generic table:
<tr v-for="row in filteredData" >
<td v-for="column in visibleColumns">
<span v-if="column.type=='Date'" :class="column.cssClass">{{row[column.field] | formatDate}}</span>
<span v-else-if="column.type=='Bool'" :class="column.cssClass"><input #change="genericPost(column.url,row)" class="w3-check" type="checkbox" v-model="row[column.field]" ></span>
<span v-else-if="column.type=='Decimal'" :class="column.cssClass">{{row[column.field] | formatPrice}}</span>
<span v-else-if="column.type=='Button'" :class="column.cssClass"><a #click="clickItem(column.url,row)" class="w3-button w3-blue w3-padding-small">Edit</a></span>
<span v-else-if="column.type=='Link'" :class="column.cssClass"><router-link :to="{ path: row.route }">{{row[column.field]}}</router-link></span>
<span v-else :class="column.cssClass">{{row[column.field]}}</span>
</td>
</tr>
Is there any way to remove span element from conditional rendering ?
To have simple
<td class="xxx">value</td>
not <td><span class="xxx">value</span></td>

Answer 1

You can use v-for with child or sub <template> tags.
<tr v-for="row in filteredData" >
<td v-for="column in visibleColumns" :class="column.cssClass">
<template v-if="column.type=='Date'">{{row[column.field] | formatDate}}</template>
<template v-else-if="column.type=='Bool'" ><input #change="genericPost(column.url,row)" class="w3-check" type="checkbox" v-model="row[column.field]" ></template>
<template v-else-if="column.type=='Decimal'" {{row[column.field] | formatPrice}}</template>
<template v-else-if="column.type=='Button'" ><a #click="clickItem(column.url,row)" class="w3-button w3-blue w3-padding-small">Edit</a></template>
<template v-else-if="column.type=='Link'" ><router-link :to="{ path: row.route }">{{row[column.field]}}</router-link></template>
<template v-else >{{row[column.field]}}</template>
</td>
</tr>
In documentation: https://v2.vuejs.org/v2/guide/conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt and https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt
FYI, it appears to be undocumented but it seems you can also use the <slot> tag in place of v-for with the <template> tags as well. Since I know there are no hidden "gotchas" with the template tag I just use it.