Cannot use v-for on stateful component root element because it renders multiple elements?

Question

app.js

var Users = {
    template: `
        <tr v-for="list in UsersData">
            <th>{{ list.idx }}</th>
            <td>{{ list.id }}</td>
        </tr>
    `,
    data: function () {
        return {
            UsersData //get data from query
        }
    }
}

var mainview = new Vue({
    el: "#mainview",
    components: {
        'users': Users
    },
    method: {}
})

layout.blade.php

<body>
    <div class="container">
        <aside>...</aside>
        <main id="mainview">
            @section('content')
            @show
        </mainview>
    </div>
</body>

index.blade.php

@extends('layout')
@section('content')
<table>
    <thead>
        <tr>
            <th>IDX</th>
            <th>ID</th>
        </tr>
    </thead>
    <tbody>
        <users></users>
    </tbody>
</table>
@endsection

ERROR LOG from chrome console

[Vue warn]: Cannot use v-for on stateful component root element because it renders multiple elements:

<tr v-for="list in UsersData">
    <th>{{ list.idx }}</th>
    <td>{{ list.id }}</td>
</tr>

vue.js:525 [Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node. (found in component )

How should I fix code?

score 46 · Accepted Answer · answered May 26 '17 at 05:01

Your template has to have one root element. It's just one rule you cannot break. Since you're making a table, it would make sense to make tbody the root element.

var Users = {
    template: `
        <tbody>
            <tr v-for="list in UsersData">
                <th>{{ list.idx }}</th>
                <td>{{ list.id }}</td>
            </tr>
        </tbody>
    `,
    data: function () {
        return {
            UsersData //get data from query
        }
    }
}

index.blade.php

@extends('layout')
@section('content')
<table>
    <thead>
        <tr>
            <th>IDX</th>
            <th>ID</th>
        </tr>
    </thead>
    <users></users>
</table>
@endsection

I cannot wrap my template into or because there is not the single loop in my cause but two, first one for special columns, another one for data columns. Wrapping everything into — Dmitriy Sintsov, Apr 27 '18 at 12:52

score 37 · Answer 2 · answered Jul 19 '17 at 20:38

37

For the lazy: Vue interprets the root element having a v-for loop on it as producing multiple root level elements (a nono in modern JS frameworks).

Just wrap your template in a superfluous blank <div>.

answered Jul 19 '17 at 20:38

corysimmons

7,296
4
57
65

15

Adding random
s in the middle of the table structure just to keep the framework happy? That doesn't seem like a good idea.
– Anthony Hayward Jan 24 '18 at 20:19
6

I hate the answer. But it worked really well for me haha – Mark Jan 26 '18 at 12:32
Adding a
worked for me too but why do we need it in vue?
– mk23 Jun 18 '21 at 00:50
1

Why does v-for directive needs a single root element? – mk23 Jun 18 '21 at 00:51

score 1 · Answer 3 · answered Jul 13 '22 at 11:51

I struggled with this, until I realized you can just add a section tag over everything in template and then this error goes away. Example

//gives error 

<template> 
  <div classname="allFutures" v-for="(items, index) in arr">
      <Future title="Shee" />
    </div>
</template> 

    // do this instead

<template>
  <section id="main" class="main-alt">
    <div classname="allFutures" v-for="(items, index) in arr">
      <Future title="Shee" />
    </div>
  </section>
</template>

Cannot use v-for on stateful component root element because it renders multiple elements?

3 Answers3

Linked