vue.js - laravel聯合查詢回傳資料使用vuejs顯示,原始資料表可以顯示,關聯表資料不能顯示
仅有的幸福
仅有的幸福 2017-05-16 16:51:15
0
2
669

涉及到3張資料表:users、articles、images
users和articles,一對多,也就是一個使用者可以有多篇文章
articles和images,一對一,也就是一篇文章有一張圖片,(這裡雖然可以把圖片當作articles表的一列,但這裡先不這樣做)

控制器:查詢目前登入使用者的文章,和文章對應的圖片,返回,前台用vuejs接收。

    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>

有兩個問題,程式碼在js部分:
1、使用$.getJSON發送ajax請求,傳回一個對象,html中title欄位可以正常顯示。關聯表image欄位不能顯示,該怎麼寫才能顯示?

2、當使用vue-resource程式碼發送ajax請求的時候,返回的是一個數組,數組中的元素是對象,這時title字段也不能顯示,image字段當然也不會顯示,應該怎麼寫才能顯示?

仅有的幸福
仅有的幸福

全部回覆(2)
洪涛
  1. item.image.image

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

小葫芦

響應.數據

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板