javascript - Laravel + Vue.js。单击按钮时加载更多数据

Question

我有问题。当我单击该按钮时，它会收到一个完整的数据库，但我想要老部分数据库。我该怎么做？

例如:每次点击后我想阅读 10 篇文章。感谢您的帮助。

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) 只加载 10 个帖子

Answer 1

你可以这样做:

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

-初始化数据属性 morMsgFetched 设置为 false 以指示是否获取更多消息

• 如果 morMsgFetched 为 false 发出 axios 请求并将响应发送给 moreMessages，然后从 moreMessages 中删除 10 并设置它到消息[]..

• 之后将 morMsgFetched 设置为 true

• 在 subsequest 上单击从 moreMessages 中删除 10 并将其推送到“messages[]`”