модальная модель Vue / Vuetify или лучший дизайн практики

Question

В приложении, над которым я работаю, у нас есть много модалов, каждый из которых содержит небольшой объем данных, обычно 2-3 поля, иногда флажки, списки и т. Д. c.
Вопрос в том, как выполнить сброс / уничтожение компонент изнутри, когда он закрыт. Причина этого может быть двоякой:
1) Не нужно очищать отдельные поля данных на каждом модале.
2) Наблюдатели на реквизитах будут снова запускаться, когда модал открывается во второй раз (некоторые модалы). являются «редактировать» и, следовательно, предварительно заполнены, я бы предпочел не управлять этими данными).
Теперь, если модальный был закрыт снаружи, то я мог бы изменить ключ на компоненте, и это решило бы проблему, так как модальный закрыт изнутри компонента, тогда я не знаю, смогу ли я это сделать (было бы здорово). Как вы настраиваете свои модалы? Какой будет чистая архитектура?

Пример кода:

<parentComp>
  <customChildModal ref="$customChildModal"></customChildModal>
</parentComp>
// customChildModal
<v-dialog v-model="dialogState">
  <v-text-field v-model="name">
   ...
  </v-text-field>
<v-btn @click="dialogState = false">Cancel</v-btn>
<v-btn @click="saveSomething">Save</v-btn>
...
data(){
   return {
     dialogState: false,
    name: ''
    ...

Теперь в некоторых случаях у меня действительно много полей, и мне нужно, чтобы они очищались каждый раз при закрытии модального окна. Это должно охватывать случаи, когда нажимается «Отмена», а также когда пользователь щелкает за пределами модальной клавиши или клавиши ES C, которую я поддерживаю.

Answer 1

Для создания и уничтожения компонента я считаю, что вы должны использовать v-if. Но, к сожалению, это не так просто с v-dialog из-за перехода.

Первое решение, использовать v-dialog внутри родителя вместо потомка:

Родитель:

<v-btn @click.stop="dialog = true">Open Dialog</v-btn>

<v-dialog v-model="dialog">
  <!-- transition component help to keep leave transition -->
  <transition :duration="150">
    <Child v-if="dialog"/>
  </transition>
</v-dialog>

Ребенок:

<v-btn @click="$parent.dialog = false">Disagree</v-btn>

Пример

Второе решение, используйте v-dialog внутри ребенка

Родитель:

<v-btn @click.stop="dialog = true">Open Dialog</v-btn>

<Child v-if="dialog" @close="dialog = false"/>

Ребенок:

<v-dialog v-model="dialog" @click:outside='close'>
  <v-btn @click="close">Disagree</v-btn>
</v-dialog>

{
  mounted() {
    this.dialog = true
  },
  methods: {
    close() {
      this.dialog = false
      setTimeout(() => { // again this help to keep transition
        this.$emit('close')
      }, 150)
    }
  }
}

Пример

Я думаю, что оба решения верны в разных точках зрения. Но я предпочитаю первое решение, так как оно занимает меньше места.