时间戳

首页 > 解决方案 > 在父级上打开 Vue 对话框（模态）

javascript - 在父级上打开 Vue 对话框（模态）

问题描述

首先，我已经阅读了这篇文章，但它对我没有帮助（或者我无法解决这个问题）

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

我什至能够做到这一点！但它在底部导航 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>

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

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

解决方案

你可以这样做：

在Turno.vue

在底部Nav.Vue

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

推荐阅读