Vue Vuetify open dialog component onclick

Question

Edit: I figured out why the dialog isnt opening. The child component is not receiving the openComment event. I checked in the root component, and that is receiving the event correctly. Any suggestions on why sibling components are not receiving the events? It could also be because I am not using the component in anything, but because it is the modal itself, I dont really want to import it to any other vue file.

I am trying to figure out a way to open a modal dialog from my toolbar. The toolbar lives in one component file, and the dialog lives in another component file. I am trying to acheive this using events, but i cant seem to get it to trigger. What i have tried is sending a custom even which is supposed to see the set the vmodel for the dialog to true. I am using Vuetify to create the dialogs.

My dialog component file is:

<template>
<v-dialog persistent
    v-model="commentDialog"
    transition="dialog-transition">
    <v-card>
    <v-card-title primary-title>
        Add a comment
    </v-card-title>
    <v-card-text>
        <v-flex xs12 sm6 md4>
        <v-text-field label="Legal first name*" required></v-text-field>
        </v-flex>
    </v-card-text>
    </v-card>
</v-dialog>
</template>

<script>
import { bus } from '../main'
export default {
name: 'CommentModal',
data() {
    return {
    commentDialog: false
    }
},
created() {
    bus.$on('openComment', function () {
    this.commentDialog = true
    })
},
}
</script>

<style>

</style>

The toolbar component includes the following:

<template>
<v-btn fab small
    @click="commentThis($event)"
    <v-icon>fas fa-comment</v-icon>
</v-btn>
</template>

<script>
commentThis: function (e) {
    bus.$emit('openComment')
}
</script>

Bonus and follow up question to this question would be how can i see the event bus on the vue chrome debugger?

try this : bus.$on('openComment', () => { this.commentDialog = true }) — Radu Diță
@Pvl what is bus code? It is the simple export const bus = new Vue() in main.js. @radu, your syntax my my syntax is the same, so same result. Nothing triggers. — securisec
Seems like you event triggered. But problem with dialog itself. Isn't it? — NaN
@Pvl i tried that theory first. i copied the modal dialog template from vuetify to test this theory, but thats not it it seems like. — securisec

NaN NaN · Accepted Answer · 2019-03-03T10:47:02

The problem with function context

created() {
    const self = this
    bus.$on('openComment', function () {
    self.commentDialog = true
    })
},

or

bus.$on('openComment', () => (this.commentDialog = true))

Bonus and follow up question to this question would be how can i see the event bus on the vue chrome debugger?

import Vue from 'vue'

const bus = new Vue()

window.__myBus = bus

export { bus }

Vue Vuetify open dialog component onclick

2 Answers