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

[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

[J-Sek]

A dirty way:

• put a v-if or :key=".." on the element holding the data - control is outside of the dialog with the form data

A clean way:

• @after-leave="resetForm()" with your own logic - control is within the dialog form

An overengineered way:

• assuming you control dialog visibility through Pinia or composable/singleton
  • watch for event or state change and reset the data (that are also stored in Pinia or LocalStorage)

[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

[EpsilonYi]

Thanks for your answer, I have already handled it this way. What I mean is that the component should be removed automatically instead of needing to write another function to handle it.

[fabianbernhart]

You can try the Composables + Controller Pattern for Modals/Controller Pattern from Micheal Thiesen :)

EDIT: This is the overengineered way of @J-Sek