Как сбросить форму, которая не отображается в данный момент - Как правильно ее сбросить

Question

Я пытаюсь реализовать страницу загрузки как часть проекта. Он работает нормально, но мне интересно, есть ли лучший способ сбросить мою v-форму для моих входов.

Итак, вот что я делаю:

   <v-container v-if="!success">
            <v-flex>
                <v-card>
                    <v-form ref="form" class="pa-5">
                        <v-select
                            ...
                        >
                        </v-select>
                        <v-select
                            ...
                        >
                        </v-select>
                        <v-text-field
                            ...
                        />           
                        <form enctype="multipart/form-data">
                            <v-file-input
                                ...
                            ></v-file-input>
                        </form>
                    </v-form>
                    <v-card-actions>
                        <v-btn @click="addDocument">Add document</v-btn>
                    </v-card-actions>
                </v-card>
            </v-flex>
        </v-container>
        <v-container v-if="success">
            <v-flex>
                <v-card>
                    <v-alert v-if="notification.show" :type="notification.type" class="pa-3">
                        {{notification.text}}
                    </v-alert>
                    <v-card-actions>
                        <v-btn @click="resetPage">Okay</v-btn>
                    </v-card-actions>
                </v-card>
            </v-flex>
        </v-container>

Два v-контейнера, которые будут отображаться, если success верно или нет. Если success имеет значение false, все необходимые входные данные будут отображены, и если это правда (для меня это означает, что загрузка прошла успешно), второй v-контейнер должен быть отображен. Второй v-контейнер показывает только сообщение об успехе и кнопку «ОК», которая вызывает функцию resetPage . Эта функция должна сбросить все проверки и очистить все входные данные.

Что я пробовал:

Сначала я попробовал это:

resetPage() {
                this.success = false;
                this.$refs.form.reset()
            }

который, очевидно, не работает, потому что $ refs.from не отображается, потому что он является частью первого v-контейнера.

Поэтому я подумал, что должен вызвать reset после того, как он будет обработан.

Итак, я попробовал это:

methods: {
   resetPage() {
                   this.success = false;
               }
},
updated() {
   this.$refs.form.reset();
}

Но быстро я узнал, что updated () вызывается, если изменяется поле ввода или в моем случае выбирается один из них. Я должен был подумать об этом.

Поэтому я добавил allowReset и в итоге получил следующее:

methods: {
   resetPage() {
                   this.success = false;
                   this.allowReset = true;
               }
},
updated() {
   if(this.allowReset) {
      this.$refs.form.reset();
      this.allowReset = false;
   }
}

Он работает так, как мне нужно. Но, как я уже сказал, метод updated () вызывается каждый раз, когда я что-то выбираю или выбираю файл et c.

Может быть, есть лучший способ достичь моей цели?

Заранее спасибо за все советы и подсказки!

Answer 1

Добавьте v-model к вашему v-form. Всякий раз, когда вы сбрасываете страницу с помощью this.success = false, форма должна сбрасываться сама. При добавлении v-модели в форму она проверяет весь набор rules для элементов внутри этой формы. Если они все пройдут проверку, formValid будет true, в противном случае false

простой пример:

    <div v-if="!success">
      <v-form v-model="formValid">
        <v-text-field v-model="a" :rules="[required]"></v-text-field>
      </v-form>
      <!-- Button will stay disabled as long as the form is invalid -->
      <v-btn :disabled="!formValid">Save</v-btn>
    </div>
    <div v-else>
      Success
    </div>

И в ваших данных:

    formValid: false,
    required: (v) => !!v || "Required" // Will print required if textfield is empty