Laravel + Vue.js.加載更多的數據，當我點擊按鈕

我有問題。當我點擊這個按鈕時，它會收到一個完整的數據庫，但我想要部分數據庫。我怎樣才能做到這一點？Laravel + Vue.js.加載更多的數據，當我點擊按鈕

例如：每次點擊後，我想閱讀10篇文章。 Thx尋求幫助。

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個職位

來源

2017-07-21 funfelfonfafis

嘗試此堆棧[答案]（https://stackoverflow.com/questions/37343541/loading-data-when-button-is-clicked-using-vue -js-and-laravel） –

你可以這樣說：

<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數據屬性morMsgFetched設置爲false表明是否有更多的消息被提取

如果morMsgFetched是假使愛可信請求和日至moreMessages的反應，然後從moreMessages取出10並將其設置爲messages[] ..
之後設置morMsgFetched到true
上subsequest單擊刪除從10 moreMessages並將其推到「消息[]`

來源

2017-07-21 10:03:26

哦，這很聰明，但現在我有「Uncaught ReferenceError：morMsgFetched沒有定義」。爲什麼？ – funfelfonfafis

@funfelfonfafis編輯我的答案看看。在if條件檢查中應該是'this.moreMsgFetched'。並且還將'morMsgFetched'更改爲'moreMsgFetched'，因爲我有一個小錯字 –

它工作，gj兄弟。非常感謝;） – funfelfonfafis

使用Laravels建於paginat離子。

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

它返回你next_page網址，你可以用它來得到更多的結果自動計算

來源

2017-07-21 09:47:38 piotr

Laravel + Vue.js.加載更多的數據，當我點擊按鈕

回答

相關問題