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

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

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

Answer 2

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

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

但你必须将此绑定到$ 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;

在Laravel项目中使用Vue

2 个答案: