laravel 无法在有状态组件根元素上使用 v-for，因为它呈现多个元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44193822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot use v-for on stateful component root element because it renders multiple elements?
提问by ofleaf
app.js
应用程序.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
layout.blade.php
<body>
<div class="container">
<aside>...</aside>
<main id="mainview">
@section('content')
@show
</mainview>
</div>
</body>
index.blade.php
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
来自 Chrome 控制台的错误日志
[Vue warn]: Cannot use v-for on stateful component root element because it renders multiple elements:
[Vue 警告]：不能在有状态组件根元素上使用 v-for，因为它呈现多个元素：
<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 )
vue.js:525 [Vue 警告]：从渲染函数返回的多个根节点。渲染函数应返回单个根节点。（在组件中找到）
How should I fix code?
我应该如何修复代码？
回答by Eric Guan
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 tbodythe root element.
你的模板必须有一个根元素。这只是您无法打破的一项规则。由于您正在制作表格，因此制作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
index.blade.php
@extends('layout')
@section('content')
<table>
<thead>
<tr>
<th>IDX</th>
<th>ID</th>
</tr>
</thead>
<users></users>
</table>
@endsection
回答by corysimmons
For the lazy: Vue interprets the root element having a v-forloop on it as producing multiple root level elements (a nono in modern JS frameworks).
对于懒人：Vue 将具有v-for循环的根元素解释为产生多个根级元素（现代 JS 框架中的 nono）。
Just wrap your template in a superfluous blank <div>.
只需将您的模板包装在一个多余的空白处<div>。
