Vue vuetify对话框如何在不单击的情况下触发对话框组件

如何从主文件触发该对话框?我不知道如何tigg ConfirmationDialog值“ dislog”为true。还是其他方法可以做到?不想将代码分组为一个文件。

那是一个名为ConfirmationDialog.vue的组件。

<template>
    <v-layout row justify-center>
        <v-btn color="primary" dark @click.native.stop="dialog = true">Open Dialog</v-btn>
        <v-dialog v-model="dialog" max-width="290">
            <v-card>
                <v-card-title class="headline">Use Google's location service?</v-card-title>
                <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="green darken-1"
                        flat="flat"
                        @click.native="dialog = false"
                    >Disagree</v-btn>
                    <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Agree</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-layout>
</template>
<script>
export default {
    data() {
        return {
            dialog: false
        }
    }
}
</script>

主文件:

<template>
<div class="row">
    <div class="col-12">
        <confirmationDialog></confirmationDialog>
    </div>
</div>
</template>
<script>
import confirmationDialog from '../confirmationDialog'
export default {
    data() {
        return {}
    },
    components: {
        confirmationDialog
    },
    methods: {
        update() {
            // Todo: Tigger Confirmation Dislog
        }
    },
}
</script>
布萨德拉·卜拉欣(Boussadjra Brahim)

show在子组件(confirmationDialog )中添加一个称为prop的属性,并绑定到父属性:

确认对话框

...
<script>
export default {
  props:['show'], 
 data() {
        return {
            dialog: false
        }
    },
mounted(){
   this.dialog=this.show;
}
}
</script>

主要的

<template>
<div class="row">
    <div class="col-12">
        <confirmationDialog :show="showDialog"></confirmationDialog>
    </div>
</div>
</template>
<script>
import confirmationDialog from '../confirmationDialog'
export default {
    data() {
        return {
           showDialog:false,
        }
    },
    components: {
        confirmationDialog
    },
    methods: {
        update() {
            this.showDialog=true;
        }
    },
}
</script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在不单击按钮的情况下打开内容对话框,将C#代码转换为UWp应用程序的XAML代码

来自分类Dev

如何在不触发“打印对话框”的情况下执行SSRS URL操作?

来自分类Dev

在对话框Vue上将道具从父组件传递到子组件

来自分类Dev

AEM6-如何在没有对话框的情况下编辑组件?

来自分类Dev

使用Vue.js和Vuetify对话框访问dom元素

来自分类Dev

在Vue.Js中单击“确定”后,关闭模态对话框

来自分类Dev

从VUE中的父组件切换模式对话框

来自分类Dev

Vue.JS:对话框打开后如何调用函数?

来自分类Dev

如何在不打开/保存对话框的情况下播放Telerik RadCaptcha .wav文件

来自分类Dev

如何在不阻止主窗体的情况下创建对话框?

来自分类Dev

如何在没有AVISaveOptions对话框的情况下获取AVICOMPRESSOPTIONS?

来自分类Dev

更新:如何在无进度对话框的情况下启动下载的安装程序?

来自分类Dev

如何在没有对话框的情况下固定应用程序

来自分类Dev

如何在没有对话框的情况下打印XPS?

来自分类Dev

如何在没有窗口的情况下使用tkinter文件对话框

来自分类Dev

如何在无需打开应用程序的情况下显示对话框

来自分类Dev

如何在没有AVISaveOptions对话框的情况下获取AVICOMPRESSOPTIONS?

来自分类Dev

如何在不显示保存对话框的情况下保存Excel文件

来自分类Dev

如何在不打开对话框的情况下按位置加密特定图像?

来自分类Dev

如何在没有flex或transform的情况下居中对话框

来自分类Dev

如何在没有“文本输入”对话框的情况下运行LibreOffice Calc?

来自分类Dev

在群聊和公共聊天的情况下,如何使用QMServicesManager从对话框列表中删除对话框?

来自分类Dev

单击对话框

来自分类Dev

从组件外部触发打开全屏对话框工作,打开时如何关闭对话框

来自分类Dev

Vue.js - 元素 UI - 不会从下拉菜单中打开嵌套对话框

来自分类Dev

Vue.js 2:模态对话框 - 方法成功时关闭

来自分类Dev

如何在不重定向到另一个组件/页面的情况下使对话框以有角度的方式弹出?

来自分类Dev

如何在没有文件对话框的情况下通过javascript / ajax从url发布图像

来自分类Dev

如何在不使用“文件下载”对话框的情况下使用WebBrowser控件下载文件?

Related 相关文章

  1. 1

    如何在不单击按钮的情况下打开内容对话框,将C#代码转换为UWp应用程序的XAML代码

  2. 2

    如何在不触发“打印对话框”的情况下执行SSRS URL操作?

  3. 3

    在对话框Vue上将道具从父组件传递到子组件

  4. 4

    AEM6-如何在没有对话框的情况下编辑组件?

  5. 5

    使用Vue.js和Vuetify对话框访问dom元素

  6. 6

    在Vue.Js中单击“确定”后,关闭模态对话框

  7. 7

    从VUE中的父组件切换模式对话框

  8. 8

    Vue.JS:对话框打开后如何调用函数?

  9. 9

    如何在不打开/保存对话框的情况下播放Telerik RadCaptcha .wav文件

  10. 10

    如何在不阻止主窗体的情况下创建对话框?

  11. 11

    如何在没有AVISaveOptions对话框的情况下获取AVICOMPRESSOPTIONS?

  12. 12

    更新:如何在无进度对话框的情况下启动下载的安装程序?

  13. 13

    如何在没有对话框的情况下固定应用程序

  14. 14

    如何在没有对话框的情况下打印XPS?

  15. 15

    如何在没有窗口的情况下使用tkinter文件对话框

  16. 16

    如何在无需打开应用程序的情况下显示对话框

  17. 17

    如何在没有AVISaveOptions对话框的情况下获取AVICOMPRESSOPTIONS?

  18. 18

    如何在不显示保存对话框的情况下保存Excel文件

  19. 19

    如何在不打开对话框的情况下按位置加密特定图像?

  20. 20

    如何在没有flex或transform的情况下居中对话框

  21. 21

    如何在没有“文本输入”对话框的情况下运行LibreOffice Calc?

  22. 22

    在群聊和公共聊天的情况下,如何使用QMServicesManager从对话框列表中删除对话框?

  23. 23

    单击对话框

  24. 24

    从组件外部触发打开全屏对话框工作,打开时如何关闭对话框

  25. 25

    Vue.js - 元素 UI - 不会从下拉菜单中打开嵌套对话框

  26. 26

    Vue.js 2:模态对话框 - 方法成功时关闭

  27. 27

    如何在不重定向到另一个组件/页面的情况下使对话框以有角度的方式弹出?

  28. 28

    如何在没有文件对话框的情况下通过javascript / ajax从url发布图像

  29. 29

    如何在不使用“文件下载”对话框的情况下使用WebBrowser控件下载文件?

热门标签

归档