vuetify：以编程方式显示对话框

Question

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

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

<login v-bind:showDialog></login>

如果是这样，子组件如何处理这个问题？

Vuetify 对话框信息在这里： https ://vuetifyjs.com/components/dialogs

原文由 jpro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

原文由 Roy J 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

据我了解，您有一个子组件，其中有一个对话框。不确定这是否 100% 正确，但这就是我实现它的方式。带对话框的子组件：

 <template>
  <v-dialog v-model="intDialogVisible">
...
</template>

<script>
...
export default {
props: {
    dialogVisible: Boolean,
    ...
},
computed: {
    intDialogVisible: {
      get: function () {
        if (this.dialogVisible) {
          // Some dialog initialization code could be placed here
          // because it is called only when this.dialogVisible changes
        }

        return this.dialogVisible
      },
      set: function (value) {
             if (!value) {
               this.$emit('close', some_payload)
             }
      }
}

在父组件中我们使用它：

 <my-dilaog :dialogVisible="myDialogVisible"
           @close="myDialogClose">
</my-dialog>

data () {
  return {
    myDialogVisible: false
  }
},
methods: {
  myDialogClose () {
    this.myDialogVisible = false
    // other code
  }
}

原文由 Дмитрий Алферьев 发布，翻译遵循 CC BY-SA 3.0 许可协议