ofl*_*eaf 19 components laravel blade vue.js
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控制台的ERROR LOG
[Vue警告]:无法在有状态组件根元素上使用v-for,因为它呈现多个元素:
<tr v-for="list in UsersData">
<th>{{ list.idx }}</th>
<td>{{ list.id }}</td>
</tr>
vue.js:525 [Vue warn]:从渲染函数返回多个根节点.渲染函数应返回单个根节点.(在组件中找到)
我该如何修复代码？
Eri*_*uan 33
您的模板必须有一个根元素.这只是一个你不能打破的规则.因为你正在制作一个表,所以制作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
cor*_*ons 21
对于懒惰:Vue解释具有v-for循环的根元素作为生成多个根级元素(现代JS框架中的nono).
只需将模板包装在多余的空白处即可<div>.
| 归档时间： |
|
| 查看次数： |
20119 次 |
| 最近记录： |