0

Подскажите, как на vue вывести циклом <li> отзывы, надо вывести 5 отзывов с разным контентом

<ul>
     <li>
        <div class="img-block">
          <img src="../assets/images/user-img2.png" alt="image description">
        </div>
        <blockquote>
       <img src="../assets/images/quote.svg" alt="" class="quote">
      <p>Постоянно возникают потребности в каких-то вещах и незапланированных 
покупках. Здорово, что можно получить заем не выходя из дома через личный кабинет. Буду рекомендовать всем знакомым.</p>
      <cite><strong class="name">Александра, домохозяйка</strong> <span class="address">г.Новосибирск</span></cite>
    </blockquote>
  </li>
  <li>
</ul>
1

1 ответ 1

0

Нужно подставить в тег

  • директиву v-for="item in items" вот так:

    <li v-for="item in items" :key="item.id">
    

    Если нужен индекс - вот так:

    <li v-for="(item, index) in items" :key="item.id">
    

    Как мне напомнили в комментах, стоит не забывать определять :key. Он позволяет правильно обновлять как отдельные элементы списка, так и весь список при смене списка элементов. Не используйте индекс в качестве ключа, тк при вставке/удалении элементов они меняются. Айдишники и уникальные имена годятся лучше всего! Подробности в документации к Vue.js.

  • 3
    • 1
      <li v-for="(item, index) in items" :key="index"> привязку потеряли.
      – MoloF
      8 фев 2020 в 20:10
    • Да, Вы правы. Просто ещё не совсем понимаю в чём её роль... 8 фев 2020 в 20:24
    • 1
      Она нужна для корректного обновления динамического контента. Но тут есть подводный камень связанный со внутренним состоянием дочерних компонентов. При использовании index как :key может возникнуть вот такой баг. Я в свое время чуть не рехнулся, пытаясь понять почему форма ответов в списке комментариев смещается на предыдущий комментарий при добавлении вверху нового комментария (сокеты)...
      – Alexander
      27 окт 2022 в 10:58

    Ваш ответ

    Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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