Проблема ввода формы при отображении одного ввода за раз (Vue)

Question

Итак, я хочу создать форму в веб-приложении (используя Vue.js), где я показываю по одному полю формы за раз.Как только ввод заполнен правильно и нажата кнопка «Далее», он должен отобразить следующий ввод в форме.

Моя форма:

<form class="account-form">
    <div class="input-field" v-if="formCount === 1">
        <label for="email">E-mail</label>
        <input id="email" required v-bind:class="{wrong : wrongInput}" type="email" name="email" @blur="triggerCheck"/>
    </div>
    <div class="input-field" v-if="formCount === 2">
        <label for="name">Name</label>
        <input id="name" required v-bind:class="{wrong : wrongInput}" type="text" name="name" @blur="triggerCheck"/>
    </div>
    <div class="input-field" v-if="formCount === 3">
        <label for="address">Adress</label>
        <input id="address" required v-bind:class="{wrong : wrongInput}" type="text" name="address" @blur="triggerCheck"/>
        <label for="number">Nr</label>
        <input id="number" required v-bind:class="{wrong : wrongInput}" type="text" name="number" @blur="triggerCheck"/>
    </div>
    <div class="input-field" v-if="formCount === 4">
        <label for="zipcode">Zip code</label>
        <input id="zipcode" required v-bind:class="{wrong : wrongInput}" type="text" name="zipcode" @blur="triggerCheck"/>
    </div>
    <div class="input-field" v-if="formCount === 5">
        <label for="place">Place</label>
        <input id="place" required v-bind:class="{wrong : wrongInput}" type="text" name="place" @blur="triggerCheck"/>
    </div>
    <div class="input-field" v-if="formCount === 6">
        <label for="phone">Phone number</label>
        <input id="phone" required v-bind:class="{wrong : wrongInput}" type="number" name="phone" @blur="triggerCheck"/>
    </div>
</form>

Каждый раз, когда нажимается кнопка «Далее», formCount увеличивается на единицу.

Проблема заключается в том, что при вводезначение в первом входе и нажмите далее, метка для следующего входа показывает, но значение, введенное в первом входе, также появляется в следующем входе.Поэтому я ввожу адрес электронной почты, нажимаю «Далее», и следующий ввод - это Имя, где ввод должен быть пустым, но он показывает адрес электронной почты, который я указывал в предыдущем вводе, поэтому каким-то образом ввод наследуетпредыдущее значение.

Помещение value="" внутри элемента ввода, к сожалению, не будет иметь никакого значения.

Функция triggerCheck() (которая срабатывает при потере фокуса):

triggerCheck: function () {
    if (document.querySelector('form').checkValidity() === false) {
      this.wrongInput = true
      return false
    } else {
      this.wrongInput = false
      return true
    }
  }

Я не могу найти источник проблемы.

Answer 1

Хорошо, я нашел причину и почему об этой проблеме.

Vue.js повторно использует элементы, чтобы быть максимально эффективными. Обойти это можно, используя в моем случае уникальные значения ключей или , используя v-show вместо v-if.

См. Vue.js условного рендеринга