4
2
Fork 0

create Verses' vue component to list all the verses in a chapter received as a prop

This commit is contained in:
Erastus Amunwe 2020-10-24 02:32:17 +02:00
parent d3fc061596
commit df1d167900
1 changed files with 34 additions and 0 deletions

34
src/components/Verses.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<ul :dir="dir"
class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover">
<li v-for="(verse, i) in chapter" :key="i"
:class="`uk-animation-slide-bottom uk-animation-15 uk-animation-hover`">
<h4 class="btn btn-primary">
{{book_name}}
<span class="uk-badge badge-light">
{{verse.chapter}}:{{verse.verse}}
</span>
</h4>
{{verse.text}} <br/>
<p></p>
</li>
</ul>
</template>
<script>
export default {
props: {
dir: {
type:String,
required:true},
book_name: {
type:String,
required: true,
},
chapter:{
type: Object,
required: true,
}
}
}
</script>