-
-
Save JoDeveloper/6b7117438a4a595dd9b6700bed7497c3 to your computer and use it in GitHub Desktop.
vuecasts.com - episode 41 source code.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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