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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.