suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

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

ringa_leeringa_lee2844 Tage vor681

Antworte allen(2)Ich werde antworten

  • 阿神

    阿神2017-05-19 10:39:59

    你都已经把msg传过去了,把todata也传过去啊…

    Antwort
    0
  • 世界只因有你

    世界只因有你2017-05-19 10:39:59

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

    Antwort
    0
  • StornierenAntwort