laravel-5.2 - Laravel プロジェクトで Vue を使用する

Question

Laravel でプロジェクトに取り組んでおり、Vue と Vue Resource をそれに統合したいと考えています。セットアップしましたが、期待どおりに動作しません。以下は私のコードです：

ルート.php

Route::get('api/projects', function() {
    return App\Project::all();
});

app.js

new Vue({
    el: '#project',

    data: {
        projects: []
    },

    ready: function() {
        this.getProjects();
    },

    methods: {
        getProjects: function() {
            this.$http.get('api/projects').then(function(projects) {
                this.$set('projects', projects);
            });
        }
    }
});

私の見解

<div class="content" v-for="project in projects">
    <h3 class="title">
        @{{ project.title }}
    </h3>
    @{{ project.description }}
</div>

上記のコードでは、ページには何も表示されませんが、

@{{ $data | json }}

json でプロジェクト データを取得します。これはちょっと奇妙です。私が間違っていることを教えてください。

Answer 1

次のようなコードを使用しているのを見ました:

this.$http.get('api/projects').then(function(projects) {
                this.$set('projects', projects);
            });

ただし、現在 this.$http がメソッド内で機能しているため、これを $http リクエストにバインドする必要があります。

this.$http.get('api/projects').then(function(projects) {
                    this.$set('projects', projects);
                }.bind(this));

このようにも使用できます：

this.projects = projects;

それから ：

{{ $data | json }}

結果が .data 配列と一緒に来る場合

this.projects = projects.data;