Как удалить или вернуть обратно элемент отрисованный через v-for vue в зависимости помещается он в одной строке или нет?

Question

[Максим js]

Есть компонент в котором рендерится определенное количество элементов из массива типа: elem - elem - elem- elem - elem
Элементы могут быть разной ширины но расстояние между ними всегда одинаковое. Элементы могут быть отрисованы только в одну строку, если какой из элементов не помещается в родительский контейнер и выходит за его пределы или перепрыгивает на другую строку, то такой элемент скрывается(то есть если в массиве 30 элементов, а ширина контейнера может уместить в себе всего 4 элемента, то рендерятся только 4, ели же мы увеличиваем ширину и туда может поместиться еще один, то он появляется).
На данный момент отрисовываются все 30 элементов с переносом на следующую строку
elem - elem - elem- elem - elem-elem - elem - elem- elem - elem-elem - elem - elem- elem - elem-elem - elem - elem- elem - elem-elem - elem - elem- elem - elem

Comments

[RAX7]

https://qna.habr.com/q/1224228

[imko]

А просто overflow: hidden чем не подходит? Принципиально важно чтоб они в разметке не появлялись?

[Максим js]

imko, нужен адаптив

[imko]

Максим js, ну overflow довольно адаптивный)

Answer 1

[Антон Антон]

Добавить признак в массив, через телепорт отправлять в контейнер размером 0х0 (чтобы его размер видеть), если не вмещается, если помещается - отправлять обратно.
Ну или вообще рендерить все в контейнере а в нужное место выводить вычисляемое свойство с нужным количеством элементов
Если ширина не меняется, то только один раз можно вывести в контейнер и заполнить данные о ширине в исходном массиве.
Если высота известна и фиксирована, то можно просто ограничить высоту контейнера и сделать overflow: hidden

Comments

[Максим js]

Не работал с телепортами, можно пример плиз
На данный момент получаю всю ширину контейнера и общую ширину всех элементов и таким образом можно отследить когда нужно скрыть/показать последний элемент

checkWidth(){
      this.containerWidth = this.$refs.container.offsetWidth
      if(this.containerWidth <= this.allElementWidth) {
        console.log('не влезают');
      } else {
        console.log('влезают!');
      }
    },
    checkChildrenWidth() {
      const children = Array.from(this.$refs.container.childNodes);
      this.allElementWidth = children.reduce(function(sum, elem) {
        return sum + elem.offsetWidth;
      }, 0);
    }