Блог

У меня есть цикл v-for, который многократно отображает компонент шахматной игры. Однако компонент ChessGame сложен, загрузка занимает много времени, несколько сотен миллисекунд каждая, и цикл отображает десятки из них. Таким образом, сайт всегда зависает на несколько секунд и ничего не показывает, прежде чем он покажет все игры.

Есть ли подсказка, что я могу передавать Vue для повторного выполнения после каждой итерации, чтобы страница медленно заполнялась ими? Или способ работы с шаблонами Vue не поддерживает это?

 <ul v-for="(game, index) in competitions[selected_competition].games" v-bind:key="game.pgn">
  <div>
    <h4>Game {{ index 1 }}</h4>
    <ChessGame :id="'board_'   index" :ref="'board_'   index" :gameinfo="game" style="width: 400px"></ChessGame>
  </div>
</ul>
 

Есть ли подсказка, что я могу передавать Vue для повторного выполнения после каждой итерации, чтобы страница медленно заполнялась ими?

Насколько я знаю, в vue нет такой функции, чтобы медленно показывать ваши данные, хотя то, что вы можете делать, пока ваши данные не будут готовы, — это показывать загрузчик скелетов.

Это современный подход, и почти каждая крупная компания использует этот метод, чтобы указать, что что-то загружается, пока мы не обработаем данные.

Я рекомендую вам проверить это в vuetify: https://vuetifyjs.com/en/components/skeleton-loaders /