每次显示一个输入时的表单输入问题（Vue）答案

【问题标题】：Form input problem when showing one input per time (Vue)每次显示一个输入时的表单输入问题（Vue）
【发布时间】：2019-10-31 23:13:18
【问题描述】：

所以我想在 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 就会加一。

问题是，当我在第一个输入中输入一个值并按下一步时，下一个输入的标签会显示，但在第一个输入中输入的值也会出现在下一个输入中。于是我输入了一个e-mail地址，我按'Next'，下一个输入是Name，输入应该是空的，但是它显示的是我在上一个输入中填写的e-mail地址，所以不知何故输入继承了以前的值。

不幸的是，将value="" 放在输入元素中不会有任何区别。

triggerCheck() 函数（在失去焦点时触发）：

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

我找不到问题的根源。

【问题讨论】：

标签： javascript html forms vue.js

【解决方案1】：

好的，我已经找到了这个问题的原因和方法。

Vue.js 重用元素以尽可能高效。可以通过使用唯一键值或来解决这个问题，在我的情况下，使用v-show而不是v-if。

见Vue.js conditional rendering

【讨论】：