How to display a limited number of items from Firebase (Nuxt)?

Question

Vue.js

Hello, I'm doing a project on Nuxt and the Firebase base, consists of 10 elements. tell me how to display 8 elements, and then when you click on the button to the right (it will be a slider) load 8 more elements?
template like this:

<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>

The code for loading from the database is:

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

Answer 1

wostex Finished everything, the error that occurred was due to the fact that the data came in the object.promise format, and it was necessary to process the data (slides) using 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

You need to use a 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;
        }
    }
  }

Didn't test.