如何在 VUE 中重置输入和 select 的值？

Question

我的 VUE 应用程序中有一个输入和一个 select，它们的显示取决于前一个输入的 selection。如果我插入值并更改初始输入 selection，我会隐藏第二个输入和 select，以重新启动表单。当我重新启动表单并且我仍然在第一次加载时得到 selected 值时，问题就来了。我正在尝试重置这些值，但我在类似案例评论中发现的 none 方法工作正常。这是我的 select 和我想要重置值的输入

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

这是我尝试重置和 document.getElementById('').value("") 方法的方法；

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

      }
    },

如果我通过控制台打印，我会看到该值是如何被清空的，但在我关注 . 我如何阻止它出现？在这两种方法中，它都不会删除我之前在输入中显示的值。我究竟做错了什么？提前感谢大家的帮助和时间

Answer 1

我相信您需要 null 模型而不是目标元素的值。

this.itemFormInfo.name = null

如何在 VUE 中重置输入和 select 的值？

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

vue.js

select

input

reset