I use axios with vue.js to fetch data as unlimited pagination. It works fine expect when there is no data to render:

 fetchData() {
     this.loading = true
     this.page++;
     axios.get(this.BASE_URL + '/api/jokes/'+'?page='+this.page).then( 
     response => 
     //how to exist  if there is no data in the response?
      this.jokes = response.data).catch(function (error) {
        console.log(error);
      });

I'm wondering how to stop rendering when we reached to the last page and there is no more data to display?

I've looked at the docs but could not find my answer.

I use axios with vue.js to fetch data as unlimited pagination. It works fine expect when there is no data to render:

 fetchData() {
     this.loading = true
     this.page++;
     axios.get(this.BASE_URL + '/api/jokes/'+'?page='+this.page).then( 
     response => 
     //how to exist  if there is no data in the response?
      this.jokes = response.data).catch(function (error) {
        console.log(error);
      });

I'm wondering how to stop rendering when we reached to the last page and there is no more data to display?

I've looked at the docs but could not find my answer.

• javascript
• vue.js
• axios

2 Answers 2

Maybe introducing some basic flag logics. I have taken the freedom to assume, but you can always define your logic

fetchData() {
    this.loading = true;
    if (this.page > 0) {
        axios.get(this.BASE_URL + '/api/jokes/page=' + this.page)
            .then(response => {
                const isDataAvailable = response.data && response.data.length;
                this.jokes = isDataAvailable ? response.data : [];
                this.page = isDataAvailable ? (this.page + 1) : 0;
            })
            .catch(function(error) {
                console.error(error);
            });
    }
}

You could throw a custom error that will be catch by the catch method.

 fetchData() {
 this.loading = true
 this.page++;
 axios.get(this.BASE_URL + '/api/jokes/'+'?page='+this.page).then( 
 response => {
   //how to exist  if there is no data in the response?
   if (!response.data || response.data.length == 0) {
     const emptyDataError = new Error('Invalid data');
     emptyDataError.statusCode = 500;
     throw emptyDataError;
   }
   this.jokes = response.data;
 }).catch(function (error) {
   console.log(error);
 });