如何重置输入值并在VUE中选择？

问题描述

我的VUE应用程序中有一个输入和一个选择，这些显示和选择取决于先前输入的选择。 如果插入值并更改初始输入选择，则隐藏第二个输入并选择以重新启动表单。 当我重新启动表单时，仍然出现问题，并且在第一次加载时仍然得到所选值。 我正在尝试重置值，但是在类似案例审查中找到的所有方法都无法正常工作。 这是我要重置值的选择和输入

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

这是我尝试过reset和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()

      }
    },

如果我通过控制台进行打印，我会看到如何清空该值，但是输入会与书面值一起显示，直到我专注于为止。 如何阻止它出现？ 在这两种方法中，它都不会删除我先前显示在输入上的值。 我究竟做错了什么？ 谢谢大家的帮助和提前

解决方法

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

this.itemFormInfo.name = null