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

Question

所以我使用 laravel 5.2 制作了一个 api，并使用 VueJs 从中提取数据。我能够通过获取所有结果来获取 index() 操作的数据。现在我的问题变得有点复杂了。我需要制作一个 show() 方法，以便 table 中的每个 post 都可以转到它的单个 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);
        }
    }

这是我的 VueJs 代码。

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

这是我的 post 全部显示

我的问题： 1. 我应该为 show 方法创建一个单独的文件吗？ 2. 我如何利用 laravel ioc 从 post 模型中获取 $slug 并显示单个页面。

Answer 1

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

与您创建列表视图的方式相同，ajax 调用和索引 api，您可以创建一个视图，ajax 调用和 api，以显示我们的posts（使用 post id）。您的 api 响应应发送您需要显示的所有数据，包括 slug。

基于您的 github 存储库，为您的 api 创建这样的路由，其中 id 是 post id:

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

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

Creating Show Method using vue js, vue-resource & Laravel

laravel

vue.js

laravel-5.2

vue-resource

vue-router