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

Question

So i have made an api using laravel 5.2, and used VueJs to pull data from it. I was able to fetch data for the index() action by fetching all the results. Now my issue becomes little more complicated. I need to make a show() method so that each post from the table would go to it's single post page.

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);
        }
    }

This is my VueJs Code.

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

This is my Show all posts

My questions: 1. Should i create a separate file for show method ? 2. How can i leverage laravel ioc to get $slug from post model and show single page.

crabbly · Accepted Answer · 2016-06-07 00:27:38Z

0

You don't have to create a new page, however, unless you use something like Vueify, to write single file components, you may want to. It will be easier.

The same way you created your list view, ajax call and index api, you can create a view, ajax call and api, to show our posts (using post ids). Your api response should send all the data you need to display, including the slug.

Based on your github repository, create a route like this for your api, where id is the post id:

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

edited Jun 7, 2016 at 0:27

answered Jun 6, 2016 at 23:37

crabbly

5,2261 gold badge26 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

manshu Over a year ago

I tried working with it, and having trouble understanding how to write the ajax call for it. Can you help me ?

crabbly Over a year ago

Sure. The ajax call you should be able to write very easy, I can tell you that, since you already your fetch items one. Are you able to create the api? Or do you have questions about it?

crabbly Over a year ago

Looking at your github repository, I see you already have a method to show the post, create the route I just updated the answer with, then test it. After, create an ajax all from a Post view page to access it.

manshu Over a year ago

I think i've figured it out.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related