Vue Router development assistance about vue-flip-toolkit HOT 12 CLOSED

On Wed, Nov 6, 2019, 5:05 PM Doug Niccum ***@***.***> wrote: Hi I am currently in the process of trying to implement this package into a Chat Box that I currently building. I have attempted to use this in both a router and non-router environment with no luck unfortunately. Not sure if my key's or id's are off, or I am just missing the boat completely. If you have a second to tell me what I'm doing wrong, I would appreciate it. Simple This is a simple implementation that I have built that I cannot get to work: <template> <Flipper :flipKey="key"> <Flipped flipId="btn-chat-launch" scale v-if="!visible"> <chat-launch-button @click="showChat"></chat-launch-button> </Flipped> <Flipped flipId="btn-chat-launch" scale v-else> <chat-wrapper></chat-wrapper> </Flipped> </Flipper> </template> <script> import { EventBus } from '../../EventBus'; import { Flipper, Flipped } from 'vue-flip-toolkit'; import ChatLaunchButton from "./ChatLaunchButton"; import ChatWrapper from "./ChatWrapper"; export default { name: "Chat", components: { ChatLaunchButton, ChatWrapper, Flipper, Flipped, }, data() { return { visible: true } }, mounted() { EventBus.$on('hideChat', () => { this.visible = false; }) }, beforeDestroy() { EventBus.$off('hideChat'); }, computed: { key() { return this.visible.toString(); } }, methods: { showChat() { this.visible = true; } } }</script> Router This is the router implementation that I cannot get to work either: wrapper <template> <div class="chat-wrapper shadow"> <Flipper :flipKey="key" stagger="gentle" className="d-flex flex-column flex-1"> <router-view></router-view> </Flipper> </div> </template> <script> import { Flipper } from 'vue-flip-toolkit'; export default { name: "ChatWrapper", components: { Flipper, }, beforeCreate() { this.$router.push('/') }, computed: { key() { return this.$route.path; } } }</script> home <template> <div class="chat-page"> <chat-header> <button @click="hideChat" class="chat-header-button text-white bg-transparent border-0 "><i class="fa fa-bars" aria-hidden="true"></i></button> <i class="fa fa-comment mr-2 font-size-large" aria-hidden="true"></i> <span class="font-size-small">Chats</span> </chat-header> <section class="chat-list px-3"> <div class="chat-list-heading"> Recent Conversations </div> <Flipped v-for="conversation of conversations" :key="conversation.id" :flipId="conversations.slug"> <chat-conversation-card :conversation="conversation" @click="viewConversation(conversation.slug)"></chat-conversation-card> </Flipped> </section> </div> </template> <script> import { EventBus } from '../../EventBus'; import { Flipped } from 'vue-flip-toolkit'; import ChatHeader from "./ChatHeader"; import ChatConversationCard from "./ChatConversationCard"; export default { name: "ChatIndex", components: { ChatConversationCard, ChatHeader, Flipped, }, data() { return { conversations: [ {'id': 1, 'slug': 'abc'}, {'id': 2, 'slug': 'def'}, ] } }, methods: { hideChat() { EventBus.$emit('hideChat'); }, viewConversation(slug) { this.$router.push(`/conversations/${slug}`); } }, }</script> detail <template> <Flipped scale translate :flipId="flipId"> <div class="chat-page"> <chat-header> <router-link to="/" class="chat-header-button text-white bg-transparent border-0"><i class="fa fa-bars" aria-hidden="true"></i></router-link> <span class="font-size-small">Chats</span> </chat-header> <section class="chat-list px-3"> </section> </div> </Flipped> </template> <script> import ChatHeader from "./ChatHeader"; import { Flipped } from 'vue-flip-toolkit'; export default { name: "ChatConversation", components: { ChatHeader, Flipped }, computed: { flipId() { return this.$route.params.conversation; }, } }</script> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#16?email_source=notifications&email_token=ABHI7NBTNZUZ4M37YRU5UGTQSM5T5A5CNFSM4JJ6LF6KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HXNBOIQ>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABHI7NANG6QFB2N2BTWWPMLQSM5T5ANCNFSM4JJ6LF6A> .