搜索

首页  >  问答  >  正文

vue.js - laravel联合查询返回数据使用vuejs显示,原数据表可以显示,关联表数据不能显示

涉及到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字段当然也不会显示,应该怎么写才能显示?

仅有的幸福仅有的幸福2743 天前650

全部回复(2)我来回复

  • PHP中文网

    PHP中文网2017-05-16 16:53:15

    1. item.image.image

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

    回复
    0
  • 高洛峰

    高洛峰2017-05-16 16:53:15

    响应.数据

    回复
    0
  • 取消回复