javascript - Comment ajouter des données obtenues par Ajax au composant

Question

N'y a-t-il aucun moyen d'ajouter directement v-for à un composant personnalisé ? Pourquoi cette partie n'est-elle plus chargée après avoir ajouté v-for ? Comment puis-je mettre les données obtenues par ajax ici, s'il vous plaît, donnez-moi quelques conseils, merci ? beaucoup

Vue.component('my-article',{
props:['detail','user'],
template:'<h6>{{detail.title}}</h6>'+
         '<table id="phone">'+
            '<thead>'+
                '<tr>'+
                    '<td style="width: 150px;">{{detail.department}}</td>'+
                    '<td style="width: 119px;">{{detail.phone1}}</td>'+
                    '<td style="width: 121px;">{{detail.phone2}}</td>'+
                '</tr>'+
            '</thead>'+
            '<tbody>'+
                '<tr v-for="data in users" :user="data">'+
                    '<td>{{user.name}}</td>'+
                    '<td>{{user.details1}}</td>'+
                    '<td>{{user.details2}}</td>'+
                '</tr>'+
            '</tbody>'+
        '</table>'
});

Comment le faire boucler et exécuter uniquement la section tr

let vm = new Vue({
el:"#module-duty",
data:{
    article:{
        title:"值班单位电话",
        department:"单位",
        phone1:"内线电话",
        phone2:"外线电话"
    },
    users:""
},
created:function(){
    $.ajax({
        url:"http://localhost:8080/opseyetem/post/find.do",
        type:"post",
        dataType:"json",
        success:function(result){
            if(result.state==0){
                vm.users = result.data;
            }
        },
        error:function(){
            alert("请求失败");
        }
    });
}

});

Answer 1

Vue.component('my-article',{
props:['detail','user'],
template:'<h6>{{detail.title}}</h6>'+
         '<table id="phone">'+
            '<thead>'+
                '<tr>'+
                    '<td style="width: 150px;">{{detail.department}}</td>'+
                    '<td style="width: 119px;">{{detail.phone1}}</td>'+
                    '<td style="width: 121px;">{{detail.phone2}}</td>'+
                '</tr>'+
            '</thead>'+
            '<tbody>'+
                '<tr v-for="data in user">'+
                    '<td>{{data.name}}</td>'+
                    '<td>{{data.details1}}</td>'+
                    '<td>{{data.details2}}</td>'+
                '</tr>'+
            '</tbody>'+
        '</table>'
});

HTML
<my-article :detail="article" :user="users"></my-article>

Answer 2

Vos accessoires reçoivent des détails et vous utilisez des utilisateurs. D'où vient votre utilisateur ?

Answer 3

Ajoutez un accessoire au composant que vous avez défini, tel que l'attribut cdata, pour transmettre des données et référencez le composant dans le composant parent
<childComponent cdata="yourAjaxDATA"><childComponent>, afin que le composant enfant puisse cdata.attr Accédez aux données de votre requête AJAX

Answer 4

Le composant défini ci-dessus reçoit directement une variable de détail. Users est une variable du composant parent et ne peut pas être appelé directement par le composant enfant.
J'ai l'impression que votre écriture est un peu brouillonne. Une pièce d'identité peut-elle lier deux vues ?