Skip to content

Instantly share code, notes, and snippets.

@armedoctopus
Last active May 12, 2019 18:28
reactive v-if button with Facebook Comments plugin
<template>
<q-btn push dense round text-color="white" @click="refreshChat">
<q-icon name="far fa-comments" v-show="!(startchat)"></q-icon>
<q-icon name="fas fa-times" v-show="(startchat)"></q-icon>
<q-popover ref="popover" @show="startchat = true" @hide="startchat = false" keep-on-screen fit>
<q-list>
<q-item>
<q-item-main>Songxy Community Chat</q-item-main>
<q-item-side right>
<q-btn size="md" push dense round no-shadow icon="fas fa-sync" @click.native="refreshChat"/>
</q-item-side>
</q-item>
</q-list>
<q-slide-transition>
<v-facebook-comments v-if="(startchat)"/>
</q-slide-transition>
</q-popover>
</q-btn>
</template>
<script>
export default {
name: 'Chat',
data () {
return {
startchat: false
}
},
methods: {
refreshChat(){
this.startchat = false
this.$nextTick(() => {
this.startchat = true
})
}
}
</script
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment