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

Question

ест список

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

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

Answer 1

Вы никак не узнаете ширину блока, пока он не будет смонтирован. Единственное, что приходит на ум - присвоить каждому элементу свой id или ref и в хуке mounted найти каждый элемент и проверить его clientWidth.

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


 mounted() {
      for (let i = 0; i < 9; i++) {
        const elem = document.querySelector(`id-${i}`)
        if (elem.clietnWidth >= 150) {
            elem.style.display = "none"
         }
      }
}

Но это очень костыльное решение, я бы не советовал его использовать.

БЛОГ НА HUSL

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

Ответы (1 шт):