Vuejs вложенный v-for и проблема <tr>tag

Question

Когда я пытаюсь вложить внутреннюю переменную a с привязкой v-for на каждой, vue жалуется, что свойства не определены. В чем проблема?

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

Вот скрипка js: https://jsfiddle.net/78s3qnz5/

Answer 1

Вы также можете использовать теги шаблонов, если хотите использовать строки.

<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

Проблема связана с тем, что тег <tr> вложен в другой тег <tr>, что приводит к неправильной разметке, и Vue не может ее отобразить. Действительно., Сообщение об ошибке не ясно.

Решение заключается в исправлении отображаемой разметки путем замены вложенных <tr> на <td>.

Рабочий пример:

JSFiddle