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

控制器：

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 并将其设置为 messages[]..

• 之后将morMsgFetched 设置为true

• 在子序列中单击从moreMessages 中删除 10 并将其推送到 'messages[]`

Answer 2

使用 Laravel 内置的分页功能。

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

它会返回next_page url，您可以使用它来获得更多自动计算的结果

Answer 3

这可能为时已晚，但我相信最好的方法是使用分页，最初在安装时，您将发送一个请求让我们说 /posts?page=1，这是一个变量让我们说名为“pageNumber” ，每次用户点击“加载更多”按钮，你会增加pageNumber并重新发送请求，链接将页面/posts?page=2，此时你可以附加你得到的结果到已经存在的，并根据 laravel 分页器返回的 last_page 属性决定是否显示 Load More 按钮...

我确定您已经解决了您的问题或找到了其他替代方案，这可能对未来的开发人员有用。