[FIXED] How can I display HTML from a string inside a Bootstrap Carousel?

Issue

I have a Vue Component for the Bootstrap Carousel, which has the following code:

<template>
    <div :id="id" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div :id="'carousel'+subject.id" v-for="subject,index in subjects" :key="subject.id" :class="index === 0 ? 'carousel-item active' : 'carousel-item'">
                <h2>{{ subject.title}}</h2>
                <span>{{ subject.subtitle}}</span>
                <div>{{ subject.html_content}}</div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" :data-bs-target="'#'+id" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" :data-bs-target="'#'+id" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</template>
<script>
export default {
    props: ['id', 'subjects'],
}
</script>

I want to know how I can display the html string (like '<p>some content</p>') inside the carousel.

I tried using DOMParser() and parseFromString() but that injected all html content inside a single item of the carousel, and not the corresponding item for that element.

I would appreciate if the solution doesn't involve BootstrapVue as I'm using Vue-3.

Solution

You can use v-html <div v-html="subject.html_content"></div>:

new Vue({
  el: "#demo",
  data() {
    return {
      subjects: [{id: 1, title: 'aa', subtitle: "aaa", html_content: '<b>sss</b>'}, {id: 2, title: 'bb', subtitle: "bbb", html_content: '<b>sss</b>'}, {id: 3, title: 'cc', subtitle: "ccc", html_content: '<b>sss</b>'}],
      id: 1
    }
  }
})

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div :id="id" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div :id="'carousel'+subject.id" v-for="(subject,index) in subjects" :key="subject.id" :class="index === 0 ? 'carousel-item active' : 'carousel-item'">
        <h2>{{ subject.title}}</h2>
        <span>{{ subject.subtitle}}</span>
        <div v-html="subject.html_content"></div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" :data-bs-target="'#'+id" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" :data-bs-target="'#'+id" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

Answered By - Nikola Pavicevic

Answer Checked By - Timothy Miller (PHPFixing Admin)