How to programatically close a Veutify dialog

Question

Hello everyone i was searching on the vuetify documentation a function or something like that to close a form dialog just after getting the axios response with the status 200 ..

i don't if there's a way to get a dialog instance and use a close() method on it like the bootstrap modals here's my code : template code

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

and here's the script

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

Answer 1

Try to bind dialog component to a data property called open as follows :

<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 in then callback assign false to 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>