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

Question

[Евгений]

Привет.
Знакомлюсь с 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": []
	}
]
}

Answer 1

[JSmitty]

Используйте computed property, типа:

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

И замечания - используйте лучше ES6 синтаксис, промисы лучше ловить явной формой через catch. Данные у вас одной пачкой, так что передавать что-то в get - бесполезно.

Еще очень полезная привычка делать возврат промиса $http.get(), даже если сейчас это значение не будете использовать - потом, в юнит тестах и при дальнейшем расширении сбережет массу нервных клеток.

Comments

[Евгений]

Спасибо. Хотел бы уточнить, как применить dataOnPage для вызова определенной страницы и количества элементов. Также, как понимаю, мне нужно использовать полное количество элементов, для отсечки перебора, но вы из getAllImages убрали. Более того, сейчас вывод блоков не осуществляется. Что я не сделал еще, подскажите, пожалуйста.

[JSmitty]

Ну смотрите, вычисляемое свойство уже делает отсечение от общего массива нужной вам страницы заданного в this.perPage размера. Осталось только вывести данные:

<div v-for="image in dataOnPage">
    <img :src="image.path" :alt="image.name" :title="image.name">
</div>

И поискать решение для пагинации.
Или вот так:

<button @click="currentPage > 1 && currentPage--">туда</button>
Текущая - {{currentPage }} из {{ Math.ceil(images.length / perPage) }}
<button @click="currentPage*perPage < images.length && currentPage++">сюда</button>

[Евгений]

Спасибо.

[furrya_black]

Разумно ли дергать все картинки - альбомы и оффсетить их - делить на страницы на стороне клиента?

Вы получаете все скопом и делаете пагинацию.

Почему бэкенд не возьмет на себя функцию пагинации? На клиенте только отображение.

[Евгений]

furrya_black: бэк сделал, что сделал и ушел в туман.