web-dev-qa-db-fra.com

Impossible d'utiliser v-for sur l'élément racine du composant avec état car il rend plusieurs éléments?

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

JOURNAL DES ERREURS de la console chrome console

[Vue warn]: Impossible d'utiliser v-for sur l'élément racine du composant avec état car il rend plusieurs éléments:

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

vue.js: 525 [Vue warn]: plusieurs noeuds racine renvoyés par la fonction de rendu. La fonction de rendu doit renvoyer un seul nœud racine. (trouvé dans le composant)

Comment dois-je corriger le code?

laravelvue.jscomponentsblade
18
ofleaf

Votre modèle doit avoir un élément racine. Ce n'est qu'une règle que vous ne pouvez pas enfreindre. Puisque vous créez une table, il serait logique de faire de tbody l'élément racine.

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

Pour les paresseux: Vue interprète l'élément racine ayant un v-for boucle dessus comme produisant plusieurs éléments de niveau racine (un nono dans les frameworks JS modernes).

Enveloppez simplement votre modèle dans un blanc superflu <div>. ????

20
corysimmons