vue.js - 如何以编程方式关闭 Veutify 对话框

Question

大家好，我在 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.jsvuejs2axiosvue-componentvuetify.js

Answer 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>