如何以编程方式关闭 Vuetify 对话框答案

【问题标题】：How to programatically close a Veutify dialog如何以编程方式关闭 Vuetify 对话框
【发布时间】：2021-02-25 17:12:32
【问题描述】：

大家好，我在 vuetify 文档中搜索一个函数或类似的东西，以在获得状态为 200 的 axios 响应后关闭表单对话框 ..

如果有办法获取对话框实例并在其上使用 close() 方法（如引导模式），我不会这是我的代码：模板代码

<template>
    <v-dialog justify-center max-width="500px">
        <template v-slot:activator="{on}">
            <v-icon
            small
            v-on="on"
            >
            mdi-pencil
      </v-icon>
        </template>
        <v-card>
            <form @submit.prevent="submit">
            <v-card-text>
               <v-text-field
                v-model="name"
                label="Name"
                required
              ></v-text-field>
              <v-text-field
                v-model="email"
                label="E-mail"
                required
              ></v-text-field>
              <v-text-field
              v-model="password"
              label="password"
              required>

              </v-text-field>
            </v-card-text>
            <v-card-actions>
              <v-btn
              color="blue darken-1"
              text
              >close</v-btn>
              <v-btn
              color="blue darke-1"
              text
              type="submit"
              >apply</v-btn>
            </v-card-actions>
            </form>
        </v-card>
    </v-dialog>
</template>

这是脚本

<script>
  export default {

    data () {
        return {
                name: '',
                email: '',
                password: ''
            }
    },

    methods: {

      submit() {
        
        let Data = new FormData()
        Data.append('name', this.name)
        Data.append('email', this.email)
        Data.append('password', this.password)
        axios.post('http://stage.test/admin/users', Data)
        .then(Response => {
          if (Response.status === 200) {

          }
        })
      }
    },
  }
</script>

【问题讨论】：

请分享您的模板代码
我刚刚编辑了我的代码看看

标签： vue.js vuejs2 axios vue-component vuetify.js

【解决方案1】：

尝试将dialog 组件绑定到名为open 的数据属性，如下所示：

<template>
    <v-dialog v-model="open" justify-center max-width="500px">
        <template v-slot:activator="{on}">
            <v-icon
            small
            v-on="on"
            >
            mdi-pencil
      </v-icon>

.....

然后在 then 回调中将 false 分配给 this.open

<script>
  export default {

    data () {
        return {
                open:false,
                name: '',
                email: '',
                password: ''
            }
    },

    methods: {

      submit() {
        
        let Data = new FormData()
        Data.append('name', this.name)
        Data.append('email', this.email)
        Data.append('password', this.password)
        axios.post('http://stage.test/admin/users', Data)
        .then(Response => {
          if (Response.status === 200) {
            this.open=false
          }
        })
      }
    },
  }
</script>

【讨论】：