Как вывести из Firebase ограниченное количество элементов (Nuxt)?

Question

[myskypesla]

Привет, делаю проект на Nuxt и база Firebase, состоит из 10 элементов. подскажите, как вывести 8 элементов, а потом при нажатии на кнопку вправо (это будет слайдер) подгрузить ещё 8 элементов?

Template такой:

<div v-for="slide in slides" class="projects__item">
  <div class="projects-info">
    <div class="projects-info__title">{{ slide.title }}</div>
    <div class="projects-info__description">{{ slide.text }}</div>
  </div>
  <div class="projects__play"></div>
  <video class="projects__item-video" preloader="none" loop muted>
    <source :src="slide.video" type="video/mp4">
  </video>
</div>

Код загрузки из БД такой:

export default {
    async asyncData () {
      const { data } = await axios.get('https://ggproduction-f0b98.firebaseio.com/slides.json')
      return { slides: data }
    }
  }

Answer 1

[myskypesla]

wostex Доделал всё, ошибка которая возникала связана с тем, что приходили данные в формате object.promise, и нужно было обработать данные (slides) с помощью Object.values.

Осталось решить вопрос с эффектом слайдера, чтобы подгружались новые, а первые уезжали влево.

<div v-for="slide in slidesToShow">
  <div class="slider__title">{{ slide.title }}</div>
  <div class="slider__text">{{ slide.text }}</div>
  <img :src="slide.photo" alt="">
</div>
<button @click="showMore()">Показать ещё</button>

import Slider from '~components/Slider.vue'
import axios from 'axios'

export default {
  components: {
    Slider
  },
  asyncData () {
    return axios.get('https://vue-test-df6cf.firebaseio.com/slides.json')
    .then((res) => {
      return {
        slides: Object.values(res.data)
      }
    })
  },
  data: function () {
    return {
      nShow: 4, // изначально
      nAdd: 2 // сколько добавляем
    }
  },
  computed: {
    slidesToShow: function () {
      return this.slides.slice(0, this.nShow)
    }
  },
  methods: {
    showMore: function () {
      this.nShow += this.nAdd
    }
  }
}

Answer 2

[wostex]

Нужно использовать computed property:

<div v-for="slide in slidesToShow" class="projects__item">
  <div class="projects-info">
    <div class="projects-info__title">{{ slide.title }}</div>
    <div class="projects-info__description">{{ slide.text }}</div>
  </div>
  <div class="projects__play"></div>
  <video class="projects__item-video" preloader="none" loop muted>
    <source :src="slide.video" type="video/mp4">
  </video>
</div>
<button @click="showMore()">More</button>


export default {
    async asyncData () {
      const { data } = await axios.get('https://ggproduction-f0b98.firebaseio.com/slides.json')
      return { slides: data }
    },
    data: function () {
        return {
            nShow: 8, // изначально
            nAdd: 2 // сколько добавляем
        }
    },
    computed: {
        slidesToShow: function() {
            return this.slides.slice(0, this.nShow);
        }
    },
    methods: {
        showMore: function() {
            this.nShow += this.nAdd;
        }
    }
  }

Не тестировал.

Comments

[myskypesla]

Спасибо большое, почти получилось только пишет TypeError: this.slides.slice is not a function

[wostex]

Это до загрузки слайдов? Можно сделать так:

computed: {
    slidesToShow: function() {
        return (this.slides) ? this.slides.slice(0, this.nShow) : [];
    }
},

и в шаблоне

<div v-if="slidesToShow.length > 0">
<div v-for="slide in slidesToShow" class="projects__item">
</div>
</div>

[myskypesla]

wostex: Да это до загрузки даже первых 8-ми слайдов. Этот вариант тоже не работает, попробовал так написать this.slides.toString().slice(0, this.nShow), слайды выстроились по 8 штук и 2 ещё подгружается, но информация из firebase не грузиться вообще

[wostex]

myskypesla: не могу ничего сказать про asyncData, поэтому я бы попробовал просто через метод в created() хуке загрузить слайды в обычную data, и оттуда уже смотреть будет ли работать.

[myskypesla]

wostex: Всё равно спасибо огромное за проделанную работу, решение выложу

[myskypesla]

wostex: А вообще лучше воспользоваться vuefire мне кажется.