javascript - Nouveau sur Vue, comment utiliser la directive v-for dans les composants

Question

Le code est le suivant :

Vue.component('child-i',{ 
props:['msg','datato'],
template:'<h1>{{msg.title}}</h1>'+
        '<table>'+
        '<tbody>'+
            '<tr v-for="to in todata" :datato="to">'+
                '<td>{{datato.tile1}}</td>'+
                '<td>{{datato.tile2}}</td>'+
                '<td>{{datato.tile3}}</td>'+
            '</tr>'+
            '</tbody>'+
        '</thead>'
});

Deuxième code

var datas = new Vue({
el:"#app",
data:{
    parameter:{title:"hello vue js"},
    todata:[{
        tile1:"aaa",
        tile2:"www",
        tile3:"sss",
    },{
        tile1:"aaa",
        tile2:"www",
        tile3:"sss",
    },{
        tile1:"aaa",
        tile2:"www",
        tile3:"sss",
    }]
}
});

HTML

<p id="app" >
    <child-i :msg="parameter"></child-i>
</p>

En fait, ce que je veux faire est très simple. Je souhaite utiliser l'instruction v-for pour construire dynamiquement un ensemble de balises de table tr et td à l'intérieur du sous-composant. Lorsque je l'exécute, le navigateur ne signale pas d'erreur. , mais il n'y a rien à ce sujet dans la balise. Ai-je mal écrit les étiquettes pour tr et td ? , j'espère que le maître pourra donner quelques conseils ou fournir une démo pour référence

Answer 1

Vous avez déjà envoyé le msg ainsi que le todata...

Answer 2

HTML

<p id="app" >
    <child-i :msg="parameter" :datato="todata"></child-i>
</p>

JS

Vue.component('child-i',{
props:['msg','datato'],
template:'<h1>{{msg.title}}</h1>'+
        '<table>'+
        '<tbody>'+
            '<tr v-for="to in datato">'+
                '<td>{{to.tile1}}</td>'+
                '<td>{{to.tile2}}</td>'+
                '<td>{{to.tile3}}</td>'+
            '</tr>'+
            '</tbody>'+
        '</thead>'
});