Vue.js root element on table rows

Question

Using this hierarchy of components in vue.js app:

<Root>
  <Table>
    <Row>
    <Row>
    ...
    <Row>

The poblem is with root element in Row component. At first it was table TR element. But now I don't know how many TR rows will be in Row component. Template tag can't be root element.

How it's better to organize Row controller with many TR rows?

<script type="text/template" id="row-template">
<tr>
  <td>{{row.name}}</td>
  <td>{{row.price}}</td>
</tr>
<tr>
  <td>-</td>
  <td>{{row.params[0].name}}</td>
</td>
<tr>
  <td>-</td>
  <td>{{row.params[1].name}}</td>
</td>
</script>

Answer 1

In addition to the multiple-tbody trick, it will be necessary to use the is attribute with a tbody tag to instantiate the component so that you don't have a component tag where it is not legal.

new Vue({
  el: "#foo",
  components: {
    componentName: {
      props: ['first'],
      template: '#cn-template'
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<template id="cn-template">
    <tbody>
      <tr>
        <td>{{first}}</td>
      </tr>
      <tr>
        <td>two</td>
      </tr>
    </tbody>
</template>
<table id="foo">
  <tbody>
    <tr>
      <td>Parent</td>
    </tr>
  </tbody>
  <tbody is="componentName" first="one">
  </tbody>
</table>