无法在有状态组件根元素上使用 v-for，因为它呈现多个元素？答案

【问题标题】：Cannot use v-for on stateful component root element because it renders multiple elements?无法在有状态组件根元素上使用 v-for，因为它呈现多个元素？
【发布时间】：2017-10-26 21:21:40
【问题描述】：

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

来自 chrome 控制台的错误日志

[Vue 警告]：不能在有状态组件根元素上使用 v-for，因为它会渲染多个元素：

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

vue.js:525 [Vue 警告]：从渲染函数返回多个根节点。渲染函数应返回单个根节点。（在组件中找到）

我应该如何修复代码？

【问题讨论】：

标签： laravel vue.js components blade

【解决方案1】：

对于懒惰的人：Vue 将带有 v-for 循环的根元素解释为产生多个根级元素（现代 JS 框架中的一个 nono）。

只需将您的模板包装在一个多余的空白<div> 中。 ?

【讨论】：

在表格结构的中间添加随机
只是为了让框架满意？这似乎不是一个好主意。
我讨厌这个答案。但它对我来说真的很有效哈哈
添加一个
也对我有用，但为什么我们在 vue 中需要它？
为什么 v-for 指令需要单个根元素？

【解决方案2】：

您的模板必须有一个根元素。这只是你不能打破的一条规则。由于您正在制作表格，因此将 tbody 设为根元素会很有意义。

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

【讨论】：

我无法将模板包装到或中，因为我的原因中没有单个循环，而是两个循环，第一个用于特殊列，另一个用于数据列。将所有内容包装到