v-dialog close が機能しない

Question

親子間のcomponentでv-modelを使用してv-dialogのcloseを動かそうとしているのですが
clickを押してもcloseが動作してくれません

コードのどこを変更すればいいか教えてください

親
<template>
<v-container>
<v-tabs v-model="tab" fixed-tabs centered background-color="cyan darken-1" color="white" slider-color="orange" icons-and-text >
<v-tab
@click="opennewEvent"
>
新着順
<v-icon>mdi-clock-time-eight</v-icon>
</v-tab>
<v-tab
@click="openSearch"
>
市区郡検索
<v-icon>mdi-magnify</v-icon>
</v-tab>
<v-tab
@click.stop="openPost"
>
イベント投稿
<v-icon>mdi-file-send</v-icon>
</v-tab>
</v-tabs>
<v-row justify="center">
<v-col cols="12" md="10" sm="10">
</v-col>
</v-row>
<v-tabs-items v-model="tab" touchless>
<v-tab-item>
<newEvent v-if="newEvent" />
</v-tab-item>
<v-tab-item>
<Search v-if="Search" />
</v-tab-item>
<v-dialog v-model="dialog" v-if="eventpostingPage" max-width="600px" activator>
<v-tab-item>
<eventpostingPage v-model="dialog" />
</v-tab-item>
</v-dialog>
</v-tabs-items>
</v-container>
</template>

<script> import newEvent from "~/components/menu/eventsearch/newEvent.vue" import Search from "~/components/menu/eventsearch/Search.vue" import eventpostingPage from "~/components/menu/post/eventpostingPage.vue" export default { components: { newEvent, Search, eventpostingPage, }, data () { return { tab: null, dialog: false, newEvent: true, Search: false, eventpostingPage: false, } }, methods: { opennewEvent () { this.newEvent = true, this.Search = false, this.eventpostingPage = false }, openSearch () { this.newEvent = false, this.Search = true, this.eventpostingPage = false }, openPost () { this.newEvent = false, this.Search = false, this.eventpostingPage = true, this.dialog = true }, } } </script>

子

<template> <v-container> <v-row justify="center"> <v-card> <v-form> <v-card-title> <span class="text-h5">イベント投稿</span> </v-card-title> <v-card-text> <v-container> <v-row> <v-col cols="12" > <eventName /> </v-col> <v-col cols="12" > <dateTime /> </v-col> <v-col cols="4" > <cityWard /> </v-col> <v-flex offset-xs0 xs8 > <streetAddress /> </v-flex> <v-col cols="12" > <Description /> </v-col> </v-row> </v-container> </v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn color="blue darken-1" text @click="dialog = false" > Close </v-btn> <v-btn color="blue darken-1" text @click="dialog = false" > Save </v-btn> </v-card-actions> </v-form> </v-card> </v-row> </v-container> </template> <script> import eventName from "~/components/menu/post/eventpostingPage/eventName.vue" import dateTime from "~/components/menu/post/eventpostingPage/dateTime.vue" import cityWard from "~/components/menu/post/eventpostingPage/cityWard.vue" import streetAddress from "~/components/menu/post/eventpostingPage/streetAddress.vue" import Description from "~/components/menu/post/eventpostingPage/Description.vue" export default { components: { eventName, dateTime, cityWard, streetAddress, Description, }, data () { return { valid: false, dialog: false, } }, props: ["value"], methods: { } } </script>

Answer 1

$emit書いたらよくなりました