CODEWITHSUNDEEP
javascriptphplaravelvue.js
funfelfonfafis
funfelfonfafis

Reputation: 187

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

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

Upvotes: 1

Views: 6194

Answers (3)

Ala Bagann&#233;
Ala Bagann&#233;

Reputation: 31

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.

Upvotes: 0

Vamsi Krishna
Vamsi Krishna

Reputation: 31362

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[]`

Upvotes: 1

piotr
piotr

Reputation: 1282

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

Upvotes: 1

Related Questions