vue.js - Les données renvoyées par la requête conjointe de Laravel sont affichées à l'aide de vuejs. La table de données d'origine peut être affichée, mais les données de la table associée ne peuvent pas être affichées.

Question

Implique 3 tableaux de données : utilisateurs, articles, images
Utilisateurs et articles, un-à-plusieurs, c'est-à-dire qu'un utilisateur peut avoir plusieurs articles
Articles et images, un-à-un, c'est-à-dire qu'un article a une image , (Bien que l'image puisse être utilisée comme colonne dans le tableau des articles, nous ne le ferons pas encore ici)

Contrôleur : interrogez les articles de l'utilisateur actuellement connecté et les images correspondant aux articles, renvoyez-les et utilisez vuejs pour les recevoir à la réception.

    public function articles()
    {
        $user=\Auth::user();
        $articles = $user->articles()->with('images')->get();
        return $articles;
    }

javascript :

    <script type="text/javascript">
        Vue.config.debug = true;
        var vm = new Vue({
            el: "#app",
            data: function(){
                return{
                    items: []
                }
            },
            created() {
                var article=this;
               /* $.getJSON('/articles/image',function(data){
                    console.log(data);
                    article.items=data;
                });*/

                this.$http.get('/articles/image').then((response) => {
                    console.log(response.body);
                    article.items=response.body;
                }, (response) => {
                    // error callback
                });
            }
        });
    </script>

html :

                <p class="row" v-for="(index, item) in items">
                    
                    <p class="col-xs-2">
                        @{{ item.title }}
                    </p>
                    
                    <p class="col-xs-2">
                        @{{ item.image }}
                    </p>
                </p>

Il y a deux questions, le code est dans la partie js :
1 Utilisez $.getJSON pour envoyer une requête ajax et renvoyer un objet Le champ titre dans le html peut être affiché normalement. Le champ image de la table associée ne peut pas être affiché. Comment dois-je l'écrire pour l'afficher ?

2. Lorsque vous utilisez le code vue-resource pour envoyer une requête ajax, un tableau est renvoyé et les éléments du tableau sont des objets. À ce stade, le champ titre ne peut pas être affiché, et bien sûr le champ image ne sera pas affiché. . Comment faut-il l'écrire pour l'afficher ?

Answer 1

1. item.image.image

2. Utilisez plutôt response.data或者response.json

Answer 2

response.data