CODEWITHSUNDEEP
javascripthtmlformsvue.js
user11532430
user11532430

Reputation:

Form input problem when showing one input per time (Vue)

So I want to create a form in a web application (using Vue.js) where I show one form field at a time. As soon as the input is filled in correctly and the 'Next' button is pressed, it needs to show the next input in the form.

My form:

<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>

Every time the 'Next' button is pressed, formCount is incremented by one.

The problem is that when I enter a value in the first input and press next, the label for the next input shows but the value entered in the first input also appears in the next input. So I enter an e-mail address, I press 'Next', and the next input is Name where the input should be empty, but it shows the e-mail address I filled in in the previous input, so somehow the input inherits the previous value.

Putting value="" inside the input element won't make any difference unfortunately.

The triggerCheck() function (which fires on focus loss):

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

I can't find the source of the problem.

Upvotes: 0

Views: 455

Answers (1)

user11532430
user11532430

Reputation:

Okay, I've found the why and how about this problem.

Vue.js reuses elements to be as efficient as possible. There can be worked around this by either using unique key values or in my case, using v-show instead of v-if.

See Vue.js conditional rendering

Upvotes: 0

Related Questions