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ță
– Radu Diță, Commented Mar 3, 2019 at 10:28
@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
– securisec, Commented Mar 3, 2019 at 10:31
Seems like you event triggered. But problem with dialog itself. Isn't it? — NaN
– NaN, Commented Mar 3, 2019 at 10:38
@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
– securisec, Commented Mar 3, 2019 at 10:49

NaN · Accepted Answer · 2019-03-03 10:58:26Z

0

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 }

edited Mar 3, 2019 at 10:58

answered Mar 3, 2019 at 10:47

NaN

1,98515 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

securisec Over a year ago

That doesnt trigger the modal. If i switch to es6 fat arrow functions, then i dont have to use const self = this because the this context will resolve correctly inside the function. Regardless, i tried your theory, but that doesnt trigger the modal.

NaN Over a year ago

I tried your code and it works fine if to solve context issue

securisec Over a year ago

I put in a console.log inside the callback, and it seems like it is never getting triggered. maybe that is why the modal is not opening.

NaN Over a year ago

Do you use the same bus object?

securisec · Accepted Answer · 2019-03-03 11:49:31Z

0

I solved the issue. It seems like i had to call the component somewhere in my toolbar component vue file. So i called it as ` and that enables the CommentModal component to react the the sent events. If the component is not called anywhere in the sibling components, then it does not react to any of the events.

But I would love to hear if there is a better solution to this. It feels a bit hacky to me.

answered Mar 3, 2019 at 11:49

securisec

4,1218 gold badges41 silver badges70 bronze badges

1 Comment

Radu Diță Over a year ago

This isn't hackish at all. The component must be under vue's control for it to receive events. Think about this another way: if your component isn't a modal, where should vue place show it? There is no information about this in the component itself. A component that isn't attached to the app, some how in the chain, it's not rendered. Webpack (or any other module builder) could even remove the entire code from your distribution if it's never used.

Collectives™ on Stack Overflow

Vue Vuetify open dialog component onclick

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related