<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. Подскажите как вывести правильно текст для карточки, чтобы он не размножался, а шел друг за другом как надо?