每次显示一个输入时出现表单输入问题 (Vue)

Question

所以我想在 Web 应用程序中创建一个表单(使用 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都会递增 1。

问题是，当我在第一个输入中输入

值并按下一步时，会显示下一个输入的标签，但在第一个输入中输入的值也出现在下一个输入中。所以我输入一个电子邮件地址，我按"下一步"，下一个输入是 Name，输入应该为空，但它显示了我在上一个输入中填写的电子邮件地址，因此不知何故输入继承了以前的值。

不幸的是，将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 条件渲染