在Laravel项目中使用Vue

Question

在Laravel的一个项目中工作，我想将Vue和Vue资源整合到它中。我已经安装它，但它不按预期工作。下面是我的代码：

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请求绑定这是现在这个$ 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;