Как вывести вывести ширину каждого элемента из списка?

Question

[SM_ST]

ест список

<div id="range" class="demo"> 
       <span v-for="n in 10"> 
              <span class="item">{{ n }}</span> 
       </span> 
</div>

как при отрисовке считать ширину каждого и если она больше 150 то не выводить блок

Answer 1

[Alex Step]

Это можно сделать только после отрисовки.
Сначала нужно получить в js ссылки на эти span - https://v3.ru.vuejs.org/ru/guide/migration/array-r...

Вместо вывода от одного до 10 сделать массив объектов, с номером и флагом show и проходится циклом по этому массиву

Потом в цикле перебираете их и смотрите ширину
this.$refs.items[0].clientWidth , меняете соответствующему элементу массива флаг show

Comments

[SM_ST]

Мне нужно не скрывать их, а не выводить вообще

[Alex Step]

SM_ST, ну выводите сначала с style visibility hidden потом показывайте только те что с флагом show:true

[SM_ST]

накидал вот так

const itemRefs = ref<HTMLElement[]>([])

const setItemRef = (tagItem: HTMLElement) => {
  if (tagItem) {
    itemRefs.value.push(tagItem)
  }
}

onBeforeUpdate(() => {
  itemRefs.value = []
})

onMounted(() => {
  widthWrapper.value = (tagWrapper.value).clientWidth

  itemRefs.value.forEach((element: HTMLElement, index: number) => {
    if (widthItems.value >= widthWrapper.value) return false

    widthItems.value += element.clientWidth

    if (widthItems.value > widthWrapper.value) {
      listTags.value.splice((index))
    }
  })
})