Vuejs nested v-for and <tr> tag issue

Question

When I try nesting a inside a with a v-for binding on each, vue complains that the properties are undefined. What's the problem?

<table>
  <thead></thead>
  <tbody>
    <tr v-for="item in items">
      <td>{{ item.name }}</td>
      <tr v-for="child in item.children">
        <td>{{ child.name }}</td>
      </tr>
    </tr>
  </tbody>
</table>

Here is a js fiddle: https://jsfiddle.net/78s3qnz5/

Answer 1

You can also use template tags in case you want to use rows.

<table>
  <thead></thead>
  <tbody>
    <template v-for="item in items">
      <tr>
        <td>{{ item.name }}</td>
      </tr>
      <tr v-for="child in item.children">
        <td>{{ child.name }}</td>
      </tr>
    </template>
  </tbody>
</table>

Answer 2

Issue is because of <tr> tag nested inside another <tr> tag, which causes invalid markup and Vue fails to render it. Indeed., error message is not clear.

Solution is to fix rendered markup, by replacing nested <tr> with <td>.

Working example:

JSFiddle