vue.js – Die von der gemeinsamen Abfrage von Laravel zurückgegebenen Daten werden mit vuejs angezeigt. Die ursprüngliche Datentabelle kann angezeigt werden, die zugehörigen Tabellendaten können jedoch nicht angezeigt werden.

Question

Beinhaltet 3 Datentabellen: Benutzer, Artikel, Bilder
Benutzer und Artikel, eins-zu-viele, das heißt, ein Benutzer kann mehrere Artikel haben
Artikel und Bilder, eins-zu-eins, das heißt, ein Artikel hat ein Bild , (Obwohl das Bild als Spalte in der Artikeltabelle verwendet werden kann, werden wir das hier noch nicht tun)

Controller: Fragen Sie die Artikel des aktuell angemeldeten Benutzers und die den Artikeln entsprechenden Bilder ab, geben Sie sie zurück und verwenden Sie Vuejs, um sie an der Rezeption zu erhalten.

    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>

Es gibt zwei Fragen, der Code befindet sich im js-Teil:
1. Verwenden Sie $.getJSON, um eine Ajax-Anfrage zu senden und ein Objekt zurückzugeben. Das Titelfeld im HTML kann normal angezeigt werden. Das Bildfeld der zugehörigen Tabelle kann nicht angezeigt werden. Wie soll ich es schreiben, um es anzuzeigen?

2. Wenn Sie Vue-Ressourcencode zum Senden einer Ajax-Anfrage verwenden, wird ein Array zurückgegeben, und die Elemente im Array sind Objekte. Zu diesem Zeitpunkt kann das Titelfeld nicht angezeigt werden, und das Bildfeld wird natürlich nicht angezeigt . Wie sollte es geschrieben werden, um es anzuzeigen?

Answer 1

1. item.image.image

2. 改用response.data或者response.json

Answer 2

response.data