1

У меня есть массив пяти объектов. При изменении размеров экрана мне надо, чтобы массив отображался частично. Например, вместо 4 объектов происходит отображение трех, затем двух, в зависимости от размеров экрана. Понимаю, что в данной ситуации актуален будет метод slice. Но полная реализация подобного мне непонятна сейчас

1
  • 1
    Можете предоставить код компонента?
    – MaxKut
    28 ноя 2019 в 7:32

2 ответа 2

0

Вот набросал готовый пример https://codepen.io/dvomaks/pen/dyPexMQ

new Vue({
  el: '#app',
  data: {
    width: 0,
    height: 0,
    items: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
  },
  computed: {
    cropItems() {
      const l = Math.round(this.width / 100);
      return this.items.slice(0, l);
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize();
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.width = window.innerWidth;
      this.height = window.innerHeight;
    }
  }
});

Для проверки нужно уменьшить окно браузера по ширине. Надеюсь я правильно понял суть задачи.

0

Если я правильно понял задачу, то один из вариантов реализации, с использованием Bootstrap-Vue

<b-container>
  <b-row>
    <b-col v-for="item in items" sm="4">{{ item }}</b-col>
  </b-row>
</b-container>
    ...
    data() {
      return {
        items: [1, 2, 3, 4, 5]
      }
    }
    ...

Вот ссылка на рабочий пример.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.