Vue: <template v-for... not working on IE 10 & 11 on 'table' tag. Woking on other browsers, including IE 9

[karol-f]

Vue.js version

1.0.24

Reproduction Link

JSFiddle

Steps to reproduce

Run JSFiddle using IE 10/11

What is Expected?

<template v-for= is working correctly for tables in IE 10/11

What is actually happening?

IE 10/11 is not rendering table correctly. Other browsers, including IE 9 works correctly.
This bug is only reproducable for "table" tag rendering. When <template... is used on lists etc. it works correctly.

[LinusBorg]

The browser removes those elements before Vue can get access to them, because following the HTML spec, only thead, tbody and <tr> are allowed as direct children of a <table> element.

This is browser dependet behaviour and can't be fixed/changed - at least for the 1.* branch. Vue 2.0 will use a virtual DOM for templates, which does free us of such limitations.

Workaround: move the fuctionality into a component and use
<tr is="componentName"> to turn the <tr> element into that component.

[Teddy-Zhu]

you can use like below

<tr v-for="item in items"><td>{{ item.message }}</td></tr>

[LinusBorg]

@Teddy-Zhu you are correct for this scenario - generally, v-for is used on <template> elements to loop over more than one element at a time:

<template v-for="item in items">
  <tr></tr>
  <tr></tr>
</template>

[karol-f]

@LinusBorg I know about it and I thought that using <template is an option like in list (UL) example. If it's not I will use TBODY tag as it is allowed mre than one time in TABLE.

@Teddy-Zhu I updated Fiddle link (https://jsfiddle.net/38sfuyaL/) - like @LinusBorg said I need to loop for two table rows at a time so v-for on TR is not an option unfortunately.

[karol-f]

If anyone will bump into that issue, here's working fiddle - https://jsfiddle.net/564x300r/.

I've just replaced <template... tag with <tbody....

Please feel free to close the issue.

[LinusBorg]

Already did ;)

[vetcovetco]

This doesn't work in IE 10/11:

http://jsfiddle.net/jLa7pd3q/

[gzpbx]

block me 3 work days ... And I believe Vue 2.0 has the same issue !!

[Aymkdn]

It took me a while to find the correct use of is. So I share it here:

<table>
  <tbody>
    <tr is="itemtpl" v-for="item in items" :item="item"></tr>
  </tbody>
</table>
[...]
<script type="text/x-template" id="itemtpl-template">
  <tr>
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
  </tr>
</script>

[sun-slaven]

@Aymkdn It works!

[KongenChen]

If you just want to loop once, you can

<table>
    <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in items">
            <td>{{item.real_name}}</td>
            <td>{{item.department_name}}</td>
        </tr>
    </tbody>
</table>

If you want to loop twice, I have a trick for that though it will produce many tbody elements. But it seems that it display correctly.

<table>
    <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
        </tr>
    </thead>
    <tbody v-for="item in items">
        <tr v-for="value in item">
            <td>{{value.value_name}}</td>
            <td>{{value.value_type}}</td>
        </tr>
    </tbody>
</table>

[ncasich]

@KongenChen, you certainly can. But if you will need to have a rowspan through all the table, it becomes impossible, for it will not spread through tbody.
that's a problem

[mike652638]

Thanks Bro @karol-f , replace

[kamerat]

I had an issue with changing template element with tbody in IE11. It seemed like IE wrapped my whole table content in an tbody tag after changing the template making an tbody > tbody.

By using thead and tfoot for the other rows fixed my issue. Hopefully this saves someone some time.