使用 vue js、vue-resource 和 Laravel 创建 Show 方法答案

【问题标题】：Creating Show Method using vue js, vue-resource & Laravel使用 vue js、vue-resource 和 Laravel 创建 Show 方法
【发布时间】：2016-10-06 16:31:59
【问题描述】：

所以我使用 laravel 5.2 制作了一个 api，并使用 VueJs 从中提取数据。我能够通过获取所有结果来获取 index() 操作的数据。现在我的问题变得有点复杂了。我需要创建一个 show() 方法，以便表格中的每个帖子都会转到它的单个帖子页面。

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>

这是我的显示所有帖子

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

【问题讨论】：

标签： laravel laravel-5.2 vue.js vue-resource vue-router

【解决方案1】：

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

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

根据您的 github 存储库，为您的 api 创建一个类似这样的路由，其中id 是帖子 ID：

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

【讨论】：

我尝试使用它，但无法理解如何为其编写 ajax 调用。你能帮我吗？
当然。 ajax 调用你应该可以很容易地编写，我可以告诉你，因为你已经是你的 fetch items 之一了。你能创建api吗？或者您对此有任何疑问？
查看您的 github 存储库，我发现您已经有了显示帖子的方法，创建我刚刚更新答案的路由，然后对其进行测试。之后，从 Post 视图页面创建一个 ajax all 来访问它。
我想我已经弄明白了。