Laravel + Vue.js. Load more data when i click on the button

Question

i have problem. When I click the button, it receives an entire database, but I want laod part database. How can I do this?

For example: After every click I would like to read 10 posts. Thx for help.

Messages.vue:

<div class="chat__messages" ref="messages">
    <chat-message v-for="message in messages" :key="message.id" :message="message"></chat-message>
    <button class="btn btn-primary form-control loadmorebutton" @click="handleButton">Load more</button>
</div>

export default{
    data(){
        return {
            messages: []
        }
    },

    methods: {
        removeMessage(id){...},

        handleButton: function () {
            axios.get('chat/messagesmore').then((response) => {
                this.messages = response.data;
            });
        }
    },

    mounted(){
        axios.get('chat/messages').then((response) => {
            this.messages = response.data
        });

        Bus.$on('messages.added', (message) => {
            this.messages.unshift(message);
                //more code
        }).$on('messages.removed', (message) => {
            this.removeMessage(message.id);
        });
    }
}

Controller:

public function index()
{
    $messages = Message::with('user')->latest()->limit(20)->get(); 
    return response()->json($messages, 200);
}
public function loadmore()
{
   $messages = Message::with('user')->latest()->get();
  // $messages = Message::with('user')->latest()->paginate(10)->getCollection();
    return response()->json($messages, 200);
}

paginate(10) Loads only 10 posts

Try this stack answer

AddWeb Solution Pvt Ltd
– AddWeb Solution Pvt Ltd

2017-07-21 09:48:55 +00:00
Commented Jul 21, 2017 at 9:48 — AddWeb Solution Pvt Ltd
– AddWeb Solution Pvt Ltd, Commented Jul 21, 2017 at 9:48

Vamsi Krishna · Accepted Answer · 2017-07-21 11:07:47Z

1

You can do it like this:

<div class="chat__messages" ref="messages">
    <chat-message v-for="message in messages" :key="message.id" :message="message"></chat-message>
    <button class="btn btn-primary form-control loadmorebutton" @click="handleButton">Load more</button>
</div>

export default{
    data(){
        return {
            messages: [],
            moreMessages: [],
            moreMsgFetched: false
        }
    },

    methods: {
        removeMessage(id){...},

        handleButton: function () {
            if(!this.moreMsgFetched){
                axios.get('chat/messagesmore').then((response) => {
                    this.moreMessages = response.data;
                    this.messages = this.moreMessages.splice(0, 10);
                    this.moreMsgFetched = true;
                });
            }
            var nextMsgs = this.moreMessages.splice(0, 10);
             //if you want to replace the messages array every time with 10 more messages
            this.messages = nextMsgs
            //if you wnt to add 10 more messages to messages array
            this.messages.push(nextMsgs);
        }
    },

    mounted(){
        axios.get('chat/messages').then((response) => {
            this.messages = response.data
        });

        Bus.$on('messages.added', (message) => {
            this.messages.unshift(message);
                //more code
        }).$on('messages.removed', (message) => {
            this.removeMessage(message.id);
        });
    }
}

-initialize a data property morMsgFetched set to false to indicate if more messages are fetched or not

if morMsgFetched is false make the axios request and st the response to moreMessages, then remove 10 from moreMessages and set it to messages[]..
After that set morMsgFetched to true
on subsequest click remove 10 from moreMessages and push it to 'messages[]`

edited Jul 21, 2017 at 11:07

answered Jul 21, 2017 at 10:03

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

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

2 Comments

funfelfonfafis Over a year ago

oh this is clever, but now i have "Uncaught ReferenceError: morMsgFetched is not defined". Why?

Vamsi Krishna Over a year ago

@funfelfonfafis edited my answer have a look. It should be this.moreMsgFetched in the if condition check. and also changed morMsgFetched to moreMsgFetched as I had a small typo

piotr · Accepted Answer · 2017-07-21 09:47:38Z

1

Use Laravels built in pagination.

public function index()
{
    return Message::with('user')->latest()->paginate(20);
}

It returns you next_page url which you can use to get more results calculated automatically

answered Jul 21, 2017 at 9:47

piotr

1,2821 gold badge9 silver badges21 bronze badges

Comments

Dharman · Accepted Answer · 2021-04-28 02:19:15Z

0

This might be too late but i believe the best way to do it is using pagination, Initially onMounted you'll send a request to let's say /posts?page=1, the one is a variable let's say named 'pageNumber', each time the user clicks on the "Load More" button, you'll increment the pageNumber and resent the request, the link will page /posts?page=2 this time, at this point you can append the results you've got to the already existing one and decide if the Load More button should be shown based on the last_page attribute returned by laravel paginator...

I'm sure you already solved your problem or found another alternative, this might be usefull for future developers.

edited Apr 28, 2021 at 2:19

Dharman♦

34k27 gold badges106 silver badges158 bronze badges

answered Apr 28, 2021 at 2:13

Ala Baganne

314 bronze badges

Collectives™ on Stack Overflow

Laravel + Vue.js. Load more data when i click on the button

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related