vue.js - Vue Vuetify 打开对话框组件 onclick

问题描述

编辑：我知道为什么对话框没有打开。子组件未接收到openComment事件。我签入了根组件，并且正确接收了事件。关于为什么兄弟组件没有收到事件的任何建议？也可能是因为我没有在任何东西中使用该组件，而是因为它是模态本身，我真的不想将它导入任何其他vue文件。

我试图找出一种从我的工具栏打开模式对话框的方法。工具栏位于一个组件文件中，对话框位于另一个组件文件中。我正在尝试使用事件来实现这一点，但我似乎无法触发它。我尝试过的是发送一个自定义，即使它应该看到将对话框的 vmodel 设置为 true。我正在使用 Vuetify 创建对话框。

我的对话框组件文件是：

<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>

工具栏组件包括以下内容：

<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>

这个问题的奖励和后续问题是我如何在 vue chrome 调试器上看到事件总线？

标签： vue.jsvuetify.js

vue.js - Vue Vuetify 打开对话框组件 onclick

问题描述

解决方案

推荐阅读