Нужно Vue js сделать текст в карточке у некоторых слов выделить текст другим стилем, т.е жирным сделать. Вывожу карточку через v-for

Question

<section class="advantage">
  <img class="advantage__image" src="/advantage.png" alt="на изображении автоматическая коробка передач">
  <div class="advantage__information-card">
    <h2 class="advantage__title">Клиенты выбирают нас,
      потому что:</h2>
    <div class="advantage__container-information-list">
    <ul class="advantage__information-list" v-for="item in items" :key="item.id">
      <li class="advantage__information-list-item">
      <img class="advantage__logos" :src="item.src" alt="изображение логотипов на тематику автомастерских">
      <p class="advantage__paragraph">{{item.title}}</p>

</li>

    </ul>
    </div>
  </div>

</section>
 </main>
</template>

<script>
export default {
  name: 'IndexPage',
  data: () => ({
    items: [
        { id: 1, src: "/advantage-logo1.svg", title: "Диагностика DSG S-Tronic Powershift - бесплатно" },
        { id: 2, src:  "/advantage-logo4.svg", title: "У нас работают только опытные механики и слесаря" },
        { id: 3, src: "/advantage-logo2.svg", title:  "Мы производим быстрый и качественный ремонт АКПП"},
        { id: 4, src: "/advantage-logo5.svg",  title: "Адаптация коробки передач DSG S-Tronic Powershift - бесплатно" },
        { id: 5, src: "/advantage-logo3.svg",  title: "В нашем сервисе адекватные цены на услуги" },
        { id: 6, src: "/advantage-logo6.svg",  title: "Мы работаем на рынке уже более 10 лет" },
       ],
  })
}
</script>

Нужно Vue js сделать текст в карточке у некоторых слов выделить текст другим стилем, т.е жирным сделать. Вывожу карточку через v-for.Все получается как надо. Чтобы выделить текст жирным нашел дерективу v-html и пытаюсь стилизовть в data через span. Стилизация получается но теперь незнаю как вывести каждый параграф отдельно, они все умножаются на 6 на число моего обьекта items. Подскажите как вывести правильно текст для карточки, чтобы он не размножался, а шел друг за другом как надо?

Answer 1

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

умножается на 6 потому что вы делаете так: (в цикле создаете 6 UL)

 <ul class="advantage__information-list" v-for="item in items" :key="item.id">

а нужно повесить цикл на Li

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

БЛОГ НА HUSL

Нужно Vue js сделать текст в карточке у некоторых слов выделить текст другим стилем, т.е жирным сделать. Вывожу карточку через v-for

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