javascript – Neu bei Vue, wie man die v-for-Direktive in Komponenten verwendet

Question

Der Code lautet wie folgt:

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>'
});

Zweiter 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>

Eigentlich möchte ich die v-for-Anweisung verwenden, um dynamisch einen Satz von tr- und td-Tabellen-Tags innerhalb der Unterkomponente zu erstellen. Wenn ich sie ausführe, meldet der Browser keinen Fehler , aber im Tag steht nichts darüber. Habe ich die Bezeichnungen für tr und td falsch geschrieben? Ich hoffe, der Meister kann einige Ratschläge geben oder eine Demo als Referenz bereitstellen

Answer 1

你都已经把msg传过去了，把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>'
});