在 Laravel 项目中使用 Vue

Question

在 Laravel 从事一个项目，我想将 Vue 和 Vue Resource 集成到其中。我已经设置好了，但它没有按预期工作。下面是我的代码：

routes.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

感谢@PROGRAMMATOR laracast。他的回答解决了这个问题。

this.$set('projects', projects.data);

Answer 2

我看到你正在使用这样的代码:

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

但是你必须将它与 $http 请求绑定，就像现在 this.$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;

在 Laravel 项目中使用 Vue

Using Vue in Laravel project

vue.js

laravel-5.2

vue-resource