Задать вопрос
@myskypesla
vue

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

Привет, делаю проект на 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 }
    }
  }
  • Вопрос задан
  • 361 просмотр
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 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
    }
  }
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@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;
        }
    }
  }


Не тестировал.
Ответ написан
6 комментариев
6 комментариев
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Второй ведущий разработчик (Fullstack, PHP, Laravel, Vue, Mysql)
Donatov.net
от 100 000 до 300 000 ₽
Frontend developer (middle/senior)
//stablecode
от 210 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
MiniApp для телеграмм на React+Redux
04 мая 2024, в 17:35
150000 руб./за проект
Простая доработка расширения
04 мая 2024, в 17:22
1000 руб./за проект
Разработка микросервиса на JS
04 мая 2024, в 17:09
30000 руб./за проект
Ещё заказы