<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Converting Bootstraps accordions to a Vue component</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<div id="app" style="width:80%; margin:20px auto 0;">
<accordions>
<accordion title="Sasuke Uchiha" active="true">
<p>Sasuke is introduced in Part I as a young, spiky-black-haired pre-teen wearing a blue shirt with an image of a fan that represents his clan on its back. He also wears short white pants and a Konohagakure headband. Early in the series, Orochimaru brands Sasuke with a Cursed Seal that, when activated, covers his body with black marks and later gives him gray skin, white hair, and claw-like wings. In Part II, he is normally depicted wearing a white kimono and black pants. Although he is skilled in the use of shuriken, in Part II Sasuke uses a chokutÅ sword that he calls Kusanagi. In addition to using Kusanagi for swordsmanship, Sasuke combines it with lightning-based techniques to increase the power of his attacks. In The Last: Naruto the Movie, his adult wardrobe consists of gray pants and a light-brown cloak over a black shirt, while in Boruto: Naruto the Movie, he wears black pants and a black cape over a lilac vest.</p>
<p>Sasuke is a silent character who tries to gain more power and kill his older brother, Itachi, for betraying and murdering their clan. He cares about his teammates and saves them on numerous occasions, but he severs all of his bonds later in Part I, believing this will strengthen him. Sasuke is moved when Naruto Uzumaki wants him to make peace with the village; he considers Naruto his only friend. Sasuke becomes more kindhearted by the end of the series, but he decides not to return home, chooses to redeem himself, and searches for an enemy threatening the peace of Konohagakure.</p>
</accordion>
<accordion title=" Naruto Uzumaki">
<p>Naruto is an orphan who has a dangerous fox-like entity known as Kurama the Nine-Tailed Fox sealed within his body by his father, the Fourth Hokage Minato Namikaze, the leader of Konoha's ninja force, at the cost of his own life and that of his wife, Kushina Uzumaki. This possession led to Naruto being ridiculed frequently by the rest of Konoha; being associated with him was considered taboo. As a youth, Naruto makes jokes and plays pranks to attract attention. Desiring what he lacked in his early life, Naruto dreams of becoming a Hokage himself with the hope that it will bring him the villagers' recognition and respect. In an attempt to become a ninja, Naruto is horrified to learn of his Jinchuriki nature, but finds acceptance from his teacher Iruka Umino, whom he views as a father. After learning the powerful Multi-Shadow Clone Jutsu, an ability to create physical copies of the user, Naruto becomes a ninja. He joins a ninja group under the leadership of Kakashi Hatake where he gains the friends he lacked during his childhood. These are his classmates who are also assigned to Team 7: Sasuke Uchiha, with whom he has had a rivalry since they first met at the ninja academy, and Sakura Haruno.</p>
</accordion>
<accordion title="Kakashi Hatake">
<p>Kakashi Hatake is introduced as the Jonin (elite ninja) leader and in charge of Team 7, a new ninja team including Naruto Uzumaki, Sasuke Uchiha and Sakura Haruno. He first appears as a carefree character as he tends to lose track of time, and is frequently late to his appointments as a result. However, when testing his students, Kakashi reveals himself as a strong opponent to the point where he fights while reading Make Out series of erotic novels. Kakashi is revealed to be very famous in the Naruto world, earning him the moniker "Kakashi of the Sharingan" for possessing the Sharingan, gaining it from a member of the Uchiha clan he was friends with. It grants him the ability to mimic the movements and jutsu of others. Although most of Kakashi's abilities were acquired with his Sharingan, he also invented the Chidori ("One Thousand Birds") and its Lightning Blade variation, a collection of lightning chakra in one's hand that uses the Sharingan's visual ability to lock onto a target. When first forming Team 7, Kakashi does not turn them into his students until instilling in them the concept of teamwork even if they have to break the rules he gave them. Kakashi continues to further this philosophy for the duration of Part I upon Sasuke Uchiha but is unable to get through to him before the latter's defection from Konoha. Kakashi also reluctantly participates in various kinds of challenges by his childhood friend Might Guy who considers Kakashi his rival. </p>
</accordion>
</accordions>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script>
Vue.component('accordions', {
template: `
<div>
<div class="accordion" >
<slot></slot>
</div><!-- .accordion -->
</div>
`
});
Vue.component('accordion', {
template: `
<div class="card">
<div class="card-header" :id="accordionName">
<h2 class="mb-0">
<button class="btn btn-link" @click.prevent="accordionToggle" type="button" data-toggle="collapse" :data-target="accordionTarget" :aria-expanded="accordionActive" aria-controls="accordionName">
{{title}}
</button>
</h2>
</div>
<div :id="accordionName" v-show="this.accordionActive" :aria-labelledby="accordionName">
<div class="card-body">
<slot></slot>
</div>
</div>
</div>
`,
data() {
return {
accordionActive : []
}
},
props: {
title: {required: true},
active: {default : false}
},
computed : {
accordionName(){
return this.title.toLowerCase().replace(/ /g, '-');
},
accordionTarget(){
return '#' + this.title.toLowerCase().replace(/ /g, '-');
},
},
methods : {
assignPropsToData(){
this.accordionActive = this.active;
},
accordionToggle() {
this.accordionActive = !this.accordionActive;
}
},
created() {
this.assignPropsToData();
}
});
var app = new Vue({
el : '#app'
})
</script>
</body>
</html>
