gpt4 book ai didi

javascript - 在父级上打开 Vue 对话框(模态)

转载 作者:搜寻专家 更新时间:2023-10-30 22:42:27 24 4
gpt4 key购买 nike

首先,我已经阅读了this发布但它对我没有帮助(或者我无法解决)

我有一个组件是 Vuetify Modal (ModalTurno.vue)。我正在尝试通过底部导航 (bottomNav.Vue)(也是一个组件)中的按钮打开它。

我什至可以做到!但它在 Bottom Nav div 上打开。所以我想在我的主 vue (Turno.Vue) 上打开它,这样我就可以看到整个模态。这让我发疯

Vuetify 模态 (ModalTurno.Vue):

    <template>
<v-dialog v-model="dialog" persistent max-width="500px" >
<v-card>
<v-card-title>
<span class="headline">User Profile</span>
</v-card-title>
</v-card>
</v-dialog>
</template>

<script>
export default {
data: () => ({
dialog: false
})
}
</script>

底部导航(bottomNav.Vue)(按钮所在的位置):

 <template>
<v-card height="200px" flat>
<v-bottom-nav
:value="true"
color="indigo"
fixed
>
<v-btn
dark
flat
value="favorites">
<span>Agregar turno</span>
<v-icon>add_circle</v-icon>
</v-btn> <!--THIS IS THE BUTTON TO OPEN THE DIALOG -->

</v-bottom-nav>
</v-card>
</template>

<script>
export default {
name: 'header',
data () {
return {
bottomNav: 'recent'
}
}
}
</script>

Turno.Vue(应显示模式的位置):

<template>
<div>
<bottomNav> </bottomNav>

<modalTurno> </modalTurno>
</div>
</template>

<script>
import bottomNav from "./components/bottomNav.vue";
import modalTurno from "./components/ModalTurno.vue";

export default {
name: 'turno',
components: {
bottomNav,
modalTurno
}
}
</script>

感谢所有花时间阅读这篇文章的人!

最佳答案

你可以这样做:

Turno.vue

bottomNav.Vue

  • 将@click="$parent.$refs.modalTurno.dialog = true"添加到 v-btn(这将更新 modalTurno 中的对话框)

关于javascript - 在父级上打开 Vue 对话框(模态),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51431838/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com