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

[Guangjun-Chen]

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