How to display nested json array correctly on page in Vue 2?

Question

JavaScript

Hello.
I'm getting acquainted with Vue and having difficulties with the correct output of objects. There is json (will be below), it is interested in the content in the contents key. The task is to display a certain number of objects per page, now all are displayed.

vue

new  Vue({
      el : '#images',
      data : {
         url : url,
         images: [],
         totalImages: 0,
         perPage: 9,
         currentPage: 1
      },
      methods : {
         getAllImages : function(page) {
            // Вывожу все изображения с ограничителем
            var options = {
               params: {
                  page : page,
                  pae_page : this.perPage
               }
            }

            this.$http.get(this.url, options).then(function(response) {
               // success
               this.images = response.data.contents;
               this.totalImages = parseInt(this.images.length);
               this.currentPage = page;
               console.log(this.totalImages);
               reBuildImg()
            }, function(error) {
               // error
            })
         },

      },
      created : function() {
         this.getAllImages(this.currentPage)
      }
   });

JSON

{
  "id": 9,
  "name": "LEps",
  "type": 1,
  "created_at": "2017-07-16 00:14:16",
  "updated_at": "2017-07-16 00:14:16",
  "contents": [
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  },
      {
    "id": 98,
    "album_id": 9,
    "name": "biography-01-364x504.jpg",
    "path": "/img/temp/m_img-1.png",
    "created_at": "2017-07-16 00:14:35",
    "updated_at": "2017-07-16 00:14:35",
    "tags": []
  }
]
}

Answer 1

Use a computed property like:

computed: {
  dataOnPage: function() {  
    var offset = (this.currentPage - 1) * this.perPage;
    return this.images.slice(offset, offset + this.perPage - 1);  }
}

UPD:

getAllImages : function() {
  return this.$http.get(this.url).then(function (response) { this.images = response.data.content; }.catch(function (error) {});
}

And remarks - use better ES6 syntax, it is better to catch promises in an explicit form through catch. You have data in one batch, so passing something to get is useless.
Another very useful habit is to return the $http.get() promise, even if you do not use this value now - later, in unit tests and with further expansion, it will save a lot of nerve cells.