vue.js - Data yang dikembalikan oleh pertanyaan bersama laravel dipaparkan menggunakan vuejs Jadual data asal boleh dipaparkan, tetapi data jadual yang berkaitan tidak boleh dipaparkan.

Question

Melibatkan 3 jadual data: pengguna, artikel, imej
Pengguna dan artikel, satu-ke-banyak, iaitu, satu pengguna boleh mempunyai berbilang artikel
Artikel dan imej, satu-dengan-satu, iaitu satu artikel mempunyai satu imej , ( Walaupun imej boleh digunakan sebagai lajur dalam jadual artikel, kami tidak akan melakukannya di sini lagi)

Pengawal: Tanya artikel pengguna yang sedang log masuk dan gambar yang sepadan dengan artikel, pulangkan dan gunakan vuejs untuk menerimanya di kaunter penerimaan tetamu.

    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>

Ada dua soalan, kod tersebut berada di bahagian js:
1 Gunakan $.getJSON untuk menghantar permintaan ajax dan mengembalikan objek Medan tajuk dalam html boleh dipaparkan seperti biasa. Medan imej jadual berkaitan tidak boleh dipaparkan. Bagaimanakah saya harus menulisnya untuk memaparkannya?

2. Apabila menggunakan kod sumber-vue untuk menghantar permintaan ajax, tatasusunan dikembalikan dan elemen dalam tatasusunan adalah objek Pada masa ini, medan tajuk tidak boleh dipaparkan, dan sudah tentu medan imej tidak akan dipaparkan . Bagaimana ia harus ditulis untuk memaparkannya?

Answer 1

1. item.image.image

2. Gunakan response.data或者response.json

sebaliknya

Answer 2

respon.data