vuetify:以编程方式显示对话框 [英] vuetify: programmatically showing dialog

问题描述

vuetify 说:如果你想以编程方式打开或关闭对话框，你可以使用带有布尔值的 v-model 来实现.

vuetify says: If you want to programmatically open or close the dialog, you can do so by using v-model with a boolean value.

但是我不太清楚这意味着什么.说使用 v-model"充其量是含糊的.父组件在设置时知道它是否应该打开，但我不清楚如何在子组件中动态更改它.我应该使用 v-bind 传递它吗?

However I am quite unclear on what this means. Saying "using v-model" is vague at best. The parent component knows on setup if it should open but I am unclear on how to dynamically change this in the child. Am i supposed to pass it using v-bind?

如果是，子组件如何处理?

If so how does the child component deal with this?

此处的 Vuetify 对话框信息:https://vuetifyjs.com/components/dialogs

Vuetify Dialog info here: https://vuetifyjs.com/components/dialogs

推荐答案

v-model 是一个指令.您将使用 v-model，而不是 v-bind.

您链接的页面有几个示例.如果您单击第一个上的 <> 按钮，它会显示

The page you link has several examples. If you click on the <> button on the first one, it shows HTML source of

<v-dialog v-model="dialog">

v-model 在组件内部名为 value 的 prop 上进行双向绑定.当您将绑定变量的值设置为 true 时，将显示该对话框；当 false 时，它会隐藏.此外，如果对话框被关闭，它会将变量的值设置为 false.

v-model makes a two-way binding on a prop that is named value inside the component. When you set the bound variable's value to true, the dialog will display; when false, it will hide. Also, if the dialog is dismissed, it will set the variable's value to false.

这篇关于vuetify:以编程方式显示对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！