[Vuejs]-Cannot figure out how to v-for on a table row (tr) and render a child component that has multiple columns (td)

by

1👍

✅

You are getting this error since the component template should only have one parent element, so, in order to fix this, you should wrap up the template’s content:

<template>
     <div>
          <td>hello</td>
          <td>world</td>
     </div>
</template>

However, I suggest to do this:

In the parent:

<Item v-for="item in items" :key="item.id" :item="item" />

In the child:

<template>
     <tr>
          <td>hello</td>
          <td>world</td>
     </tr>
</template>
👤Majed Badawi

2👍

You should include the tr tag in your template then:

<template>
    <tr>
        <td>hello</td>
        <td>world</td>
    </tr>
</template>

Then use v-for directly on the component:

<Item v-for="item in items" :key="item.id" :item="item" />
👤Ufuk Hacıoğulları

Leave a comment