How can I display HTML from a string inside a Bootstrap Carousel?-CodePudding

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

<template>
    <div :id="id"  data-bs-ride="carousel">
        <div >
            <div :id="'carousel' subject.id" v-for="subject,index in subjects" :key="subject.id" :>
                <h2>{{ subject.title}}</h2>
                <span>{{ subject.subtitle}}</span>
                <div>{{ subject.html_content}}</div>
            </div>
        </div>
        <button  type="button" :data-bs-target="'#' id" data-bs-slide="prev">
            <span  aria-hidden="true"></span>
            <span >Previous</span>
        </button>
        <button  type="button" :data-bs-target="'#' id" data-bs-slide="next">
            <span  aria-hidden="true"></span>
            <span >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.

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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"  data-bs-ride="carousel">
    <div >
      <div :id="'carousel' subject.id" v-for="(subject,index) in subjects" :key="subject.id" :>
        <h2>{{ subject.title}}</h2>
        <span>{{ subject.subtitle}}</span>
        <div v-html="subject.html_content"></div>
      </div>
    </div>
    <button  type="button" :data-bs-target="'#' id" data-bs-slide="prev">
      <span  aria-hidden="true"></span>
      <span >Previous</span>
    </button>
    <button  type="button" :data-bs-target="'#' id" data-bs-slide="next">
      <span  aria-hidden="true"></span>
      <span >Next</span>
    </button>
  </div>
</div>