vuecasts.com - episode 41 source code.
<template> | |
<div> | |
<accordion-item | |
v-for="(item, index) in items" | |
:title="item[titleName]" | |
:body="item[bodyName]" | |
:key="index" | |
:is-open="activeItemIndex == index" | |
@toggled="onToggle" | |
></accordion-item> | |
</div> | |
</template> | |
<script> | |
import AccordionItem from './AccordionItem.vue'; | |
export default { | |
props: { | |
items: { default: {} }, | |
titleName: { default: 'title' }, | |
bodyName: { default: 'body' } | |
}, | |
components: { AccordionItem }, | |
data() { | |
return { | |
activeItemIndex: null | |
}; | |
}, | |
methods: { | |
onToggle(index) { | |
if (this.activeItemIndex == index) { | |
return (this.activeItemIndex = null); | |
} | |
this.activeItemIndex = index; | |
} | |
} | |
}; | |
</script> |
<template> | |
<div class="tw-mb-8 tw-flex"> | |
<div class="tw-mr-4"> | |
<button class="tw-border tw-border-solid tw-border-grey-dark tw-rounded-full tw-w-6 tw-h-6 tw-flex tw-items-center tw-justify-center tw-text-xs tw-text-grey-dark tw-font-bold tw-leading-none tw-cursor-pointer" | |
@click="toggle" | |
> | |
<svg v-if="isOpen" xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" class="tw-fill-current"> | |
<path d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/> | |
</svg> | |
<svg v-else xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" class="tw-fill-current"> | |
<path d="M12 9H7v5H5V9H0V7h5V2h2v5h5z"/> | |
</svg> | |
</button> | |
</div> | |
<div class="tw-leading-loose"> | |
<h3 v-text="title" | |
class="tw-font-bold tw-text-2xl tw-mb-3 tw-text-black tw-leading-none tw-cursor-pointer" | |
@click="toggle" | |
></h3> | |
<div v-html="body" v-show="isOpen"></div> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
props: ['title', 'body', 'isOpen'], | |
methods: { | |
toggle() { | |
this.$emit('toggled', this.$vnode.key); | |
} | |
} | |
}; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment