How to reset the values of an input and select in VUE?

Question

I have an input and a select in my VUE application that are shown depending on the selection of a previous input. If I insert values and change the initial input selection, I hide the second input and select, to restart the form. The problem comes when I restart the form and I still get the selected values on the first load. I'm trying to reset the values but none of the methods I've found in similar case reviews works fine. Here's my select and my input that i want to reset values

              <h1 v-if="this.isSelected"> What's your selection ?</h1>
              <select
                ref="item"
                class="form-control"
                id="selectedItem"
                v-model="itemFormInfo.selectedItem"
                @change="onChangeItem($event)">
                <option v-for="item in filteredItem" v-bind:key="item.name">{{ item.name }}</option>
              </select>
              <div v-show="this.isItemSelected">
                <h1>what's your item name ?</h1>
                <input
                  type="text"
                  id="name"
                  ref="itemName"
                  class="form-control fields"
                  style="text-transform: capitalize"
                  v-model="itemFormInfo.name"
                  @keypress="formChange($event)"
                />
                <div class="loader-spinner" v-if="loading">
                  <app-loader/>
                </div>
              </div>

and here's my method where I have tried the reset and document.getElementById('').value("") methods;

    onChangeSpecie(event) {
      let specie = event.target._value;
      this.specieName = this.getSpecieName(specie);
      this.breedName = this.getBreedName(specie);
      this.$refs.breed.focus();
      if (this.isBreedSelected = true) {
        this.isBreedSelected = false;
        this.isNameCompleted = false;
        this.isLoaderFinished = false;
        this.$refs.animalName.item()

      }
    },

If I print by console I see how the value is emptied but the input appears with the written value until I focus on the . How do I stop it from appearing? in neither method does it erase my previous values showing on the input. what am I doing wrong? thank you all for your help and time in advance

if (this.isBreedSelected = true) is a bug. You're assigning this.isBreedSelected instead of comparing it to true. It should be: if (this.isBreedSelected === true) — tony19
– tony19, Commented Oct 3, 2020 at 4:10

camwhite · Accepted Answer · 2020-10-02 18:07:50Z

1

I believe you need to null the model not the target element's value.

this.itemFormInfo.name = null

answered Oct 2, 2020 at 18:07

camwhite

9478 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

homerThinking Over a year ago

I had to match it to "", because then I have to recover the .length in another function and if I match it to null it returns an error, but you have solved my problem. Thank you very much.

Collectives™ on Stack Overflow

How to reset the values of an input and select in VUE?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related