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。

问题在于，当我在第一个输入中输入一个值并按next时，将显示下一个输入的标签，但在第一个输入中输入的值也会出现在下一个输入中。因此，我输入一个电子邮件地址，然后按“下一步”，下一个输入是“名称”，其中输入应为空，但它显示了我在上一个输入中填写的电子邮件地址，因此该输入继承了以前的值。

不幸的是，将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 conditional rendering

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

1 个答案: