Как корректно вывести вложенный массив json на страницу в Vue 2?

Привет.
Знакомлюсь с Vue и возникли сложности с корректным выводом объектов. Есть json (будет ниже), в нем интересует содержимое в ключе contents. Задача вывести определенное число объектов на страницу, сейчас выводятся все.
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": []
	}
]
}

  • Вопрос задан
  • 1527 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы