web-dev-qa-db-ja.com

複数の要素をレンダリングするため、ステートフルコンポーネントのルート要素でv-forを使用できませんか？

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 consoleからのエラーログ

[Vue警告]：ステートフルコンポーネントルート要素でv-forを使用できません。複数の要素をレンダリングするためです。

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

vue.js：525 [Vue warn]：レンダリング関数から返された複数のルートノード。レンダリング関数は、単一のルートノードを返す必要があります。 （コンポーネントにあります）

コードを修正するにはどうすればよいですか？

laravelvue.jscomponentsblade
18
ofleaf

テンプレートには1つのルート要素が必要です。それはあなたが破ることができないただ一つのルールです。テーブルを作成しているので、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
33
Eric Guan

怠zyな場合：Vue=は、v-forループを持つルート要素を、複数のルートレベル要素（現代のJSフレームワークのnono）を生成するものとして解釈します。

テンプレートを余分な空の<div>で囲むだけです。 ????

20
corysimmons