使用vue js、vue-resource和Laravel创建显示方法

Question

所以我用Laravel5.2制作了一个api，并使用VueJs从它中提取数据。通过获取所有结果，我能够为index()操作获取数据。现在我的问题变得更复杂了。我需要一个show()方法，这样表中的每个帖子都会转到它的单个post页面。

methods: {
        fetchItems: function (page) {
            var data = {page: page};
            this.$http.get('api/v1/pages', data).then(function (response) {
                //look into the routes file and format your response
                this.$set('items', response.data.data);
                this.$set('pagination', response.data.pagination);
            }, function (error) {

            });
        },
        changePage: function (page) {
            this.pagination.current_page = page;
            this.fetchItems(page);
        }
    }

这是我的VueJ密码。

 <div class="col-md-12" v-for="post in items" track-by="$index">
            <a href="@{{ post.slug }}"><h1>@{{ post.title }}</h1></a>
            <p>@{{ post.body }}</p>
 </div>

这是我的展示所有的帖子

我的问题是: 1.我应该为Should创建一个单独的文件吗? 2.如何利用laravel从post模型中获取$slug并显示单个页面。

Answer 1

但是，您不必创建一个新页面，除非您使用Vueify之类的东西来编写单个文件组件，否则您可能希望这样做。会更容易的。

与创建列表视图、ajax调用和索引api的方式相同，您可以创建一个视图、ajax调用和api，以显示我们的帖子(使用post ids)。您的api响应应该发送您需要显示的所有数据，包括段塞。

基于您的github存储库，为您的api创建一个类似于此的路由，其中id是post id：

Route::resource('show/{id}', 'PagesController@show');