不能在有状态组件根元素上使用v-for，因为它呈现多个元素？
不能在有状态组件根元素上使用v-for，因为它呈现多个元素？
提问于 2017-05-26 12:48:34
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 warn:无法在有状态组件根元素上使用v-for，因为它会呈现多个元素：
<tr v-for="list in UsersData">
<th>{{ list.idx }}</th>
<td>{{ list.id }}</td>
</tr> vue.js:525 Vue warn:渲染函数返回了多个根节点。Render函数应返回单个根节点。(在组件中找到)
我应该如何修复代码？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-05-26 13:01:39
您的模板必须有一个根元素。这只是一条你不能打破的规则。由于您要创建一个表，因此将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>
@endsectionStack Overflow用户
发布于 2017-07-20 04:38:15
对于lazy: Vue将具有v-for循环的根元素解释为生成多个根级元素(在现代JS框架中不是这样)。
只需将模板包装在一个多余的空白<div>中即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44193822
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号