Trying to create a mobile-friendly chat app, I want to hide the new message button during conversations and use a different button on desktop. In addition, I have a dialog for creating new chat groups.
<v-dialog transition="dialog-top-transition" max-width="600">
<template v-slot:activator="{ on, attrs }" v-if="!showMessageList">
<v-btn fab dark color="primary" fixed right bottom v-bind="attrs" v-on="on" class="d-flex d-sm-none">
<v-icon dark>mdi-message-outline</v-icon>
</v-btn>
</template>
<template v-slot:default="dialog">
<v-card min-height="70vh">
<v-toolbar color="primary" dark>New Message
<v-spacer></v-spacer>
<v-btn icon @click="dialog.value = false">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-toolbar>
<v-card-text>
<v-text-field label="Find contact" hide-details="auto" v-model="contactQuery" @keydown="searchContact"></v-text-field>
<contacts :contacts="contacts" :user="user" v-on:new-group="addGroup"></contacts>
</v-card-text>
</v-card>
</template>
</v-dialog>
app.js
const app = new Vue({
el: '#app',
vuetify: vuetify,
data: {
//
user: {},
contactQuery: "",
contacts: [],
showMessageList: true,
},
created() {
this.showMessageList = !this.isMobile();
}
methods: {
isMobile() {
return window.innerWidth < 500;
},
openMessages() {
this.showMessageList = true;
},
hideMessages() {
if (this.isMobile()) {
this.showMessageList = false;
}
},
showGroups() {
if (this.isMobile()) {
return !this.showMessageList;
}
return true;
}
}
template
<chat-groups :user="user" :groups="groups" :curr-group="group" :is-mobile="isMobile" v-on:group-change="changeCurrGroup" v-on:open-messages="openMessages"></chat-groups>
ChatGroups.vue
export default {
props: ["groups", "currGroup", "user", "isMobile"],
data() {
return {
selectedGroup: this.currGroup
}
},
methods {
//...
openMessages() {
if (this.isMobile()) {
this.$emit("open-messages");
}
},
The challenge lies in making showMessageList reactive so it consistently hides the button. Additionally, how can the dialog be hidden from another location, such as a button in a separate container?