2
<div class='bestsellers-item' v-for='(item, index) in items' :key='index'>
 <img class='bestsellers-item__image' :src='item.photo.url' alt='image'>
 <ul class='part-rating__star-list'>
        <li 
          class='part-rating__star'
          v-for='(value, index) in item.rating'
          :key='index'
        >
          <img src='assets/shop/fill-star.svg' v-if='value'>
          <img src='assets/shop/blank-star.svg' v-else>
        </li>
      </ul>
</div>

Проблема следующая. Имею массив items, перебираю его, дабы вывести товары (item), выводится картинка все ок, у каждого товара своя. Но есть система рейтинга, item.rating. Выводит только у первого товара 2 звезды (заполненные), нужно, чтобы было 5 звезд, 2 заполнились и 3 остались пустыми. У всех товаров свой рейтинг. Не хватает знаний, как это реализовать?

1 ответ 1

3

Попробуйте так. Мы просто перебираем цикл от 1...5 ( 5 итераций)

<div class='bestsellers-item' v-for='(item, index) in items' :key='index'>
  <img class='bestsellers-item__image' :src='item.photo.url' alt='image'>
  <ul class='part-rating__star-list'>
    <li class='part-rating__star' v-for='i in 5'>
      <img src='assets/shop/fill-star.svg' v-if='item.rating >= i'>
      <img src='assets/shop/blank-star.svg' v-else>
    </li>
  </ul>
</div>
2
  • 1
    Уже лучше, но у первого товара рейтинг 2, а выводит заполненную звезду только одну. На остальных товарах, как и надо, пусто. С чем может быть связано? А, всё, нужно было поставить =>. Спасибо большое!
    – Alex
    13 авг 2021 в 8:22
  • 2
    Комбинируем ответы ;)
    – yar85
    13 авг 2021 в 8:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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