How to destroy VDialog when it closed?

[EpsilonYi]

I have a form and some custom component in dialog. so i need to reset all contents.

[KaelWD]

This should be the default unless you've set eager

[EpsilonYi]

So this should be a bug？

[KaelWD]

No, you're just doing it wrong.

[EpsilonYi]

which part?

[Shamus03]

Here's the exact same thing you're doing but with just base Vue. The problem is even though the "dialog" is being destroyed/recreated, the data still exists and gets re-bound to the input when it gets recreated.

If you want to reset the text when the dialog is opened, you will have to clear it out when opening the dialog.

https://play.vuejs.org/#eNp9Uk1P3DAQ/SsjX2gl2KWlpzS0ahEHOAACjr5kk0licGzLnuwGRfnvjJ39EkLc7PfezJt59ij+ObdY9ygykYfSK0cQkHr3RxoA1TnrCUbwWMMEtbcdnLD45Lc0kS+tCQSVKrRt4DKqvtWFDvj9QBIOtKWkkIKZfDn7sANfCDunC8Lk9xzFKsA4znXTFNG8UutEAzy1drP1+zsjuTKuZ5s3h5dSlC2Wrys7SAHrs85WqBmc9VKkHvly1y22hVIXIRxpuEzVH2v2LoeecbwPHfPl0S58DfSm43GxzWeM4pX1FfoMfrgBgtWqgpUuylfOE6ArfKPMGVmXwc9zNyRwoypqM7g43wEtqqalqJgRjogTTV7iVFDg2GvVLF6CNfymyZRzsZ1TGv29I8XPIkU2jxO5Qmu7uU0Y+R5Pd3jK8hP8JXC8GR8ePAb0a5RizxGvgBxMpK+f7lJIe5Kz6zWrvyAfkUPp44yz7H9vKh77SJemvUn/UpnmOVwPhCbsloqDRuWU9FLwX736YvXDuBeLX6mO8xTTO6+aBOM=

[EpsilonYi]

i need to reset everything in dialog. not just a input

[fabianbernhart]

I hope this helps this will reset the form.

If you want it to reset the form on close, add the reset function to your v-dialog on emit update:modelValue this will reset your form on close

I also added some helpful links 👍

Hint 1:

const form = useTemplateRef<HTMLFormElement>("your-form");

Example:

<script setup lang="ts">
import { useTemplateRef, ref } from "vue";

const form = useTemplateRef<HTMLFormElement>("my-form");

const field = ref("");

const reset = () => {
  form.value.reset();
};
</script>

<template>
  <v-form ref="my-form">
    <v-text-field label="Alrigt" v-model="field"></v-text-field>
    <v-checkbox label="Check"></v-checkbox>
  </v-form>

  <v-btn @click="reset">Reset</v-btn>
</template>

• Docs Vuetify (Dialog Events): https://vuetifyjs.com/en/api/v-dialog/#events-update:modelValue
• Docs Vuetify (Exposed Reset): https://vuetifyjs.com/en/api/v-form/#exposed-reset
• Docs Vue (Template Refs): https://vuejs.org/guide/typescript/composition-api.html#typing-template-refs

Playground: Example