Question

我有问题。当我单击按钮时，它接收整个数据库，但我想要laod部分数据库。我怎么能这样做？

例如：每次点击后我都想看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

使用分页中构建的Laravels。

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

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

Answer 2

你可以这样做：

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

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

如果morMsgFetched为false，请提出axios请求并确认对moreMessages的响应，然后从moreMessages中删除10并将其设置为messages[] .. < / p>
之后将morMsgFetched设置为true
点击从moreMessages删除10并将其推送到＆＃39; messages []`

Answer 3

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

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

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

3 个答案: