VUE 的 focus() 方法 return 控制台错误？如何正确使用？

Question

我试图专注于表单的几个元素，但第一个元素尽管已应用，但 returns 控制台出错。这是我的模板：

  <div class="container">
    <div class="col-xs-12">
      <div class="row">
        <h1 class="animal-title">Your selection is : </h1>
      </div>

      <div class="wrapper">
        <form class="first-form" @submit.prevent="onSubmit">
          <div class="image-wrapper">
            <div class="sel-image">
              <div v-on:click="imageSelected = true" v-for="item in items" v-bind:key="item.id">
                <label>
                  <input
                    type="radio"
                    name="selectedItem"
                    ref="item"
                    :value="item.id"
                    v-model="itemFormInfo.selectedItem"
                    @change="onChangeItem($event)"
                  />
                  <img v-if="item.id === 1" src="../../assets/1.png" />
                  <img v-if="item.id === 2" src="../../assets/2.png" />
                  <img v-if="item.id === 3" src="../../assets/3.png" />
                </label>
                <p class="cie-animal-subtitle">{{item.name}}</p>
              </div>
            </div>
          </div>

          <div class="form-select">
            <div v-show="filteredStock && (imageSelected || itemFormInfo.selectedItem) > 0">
              <h1 v-if="this.itemName === 'Phone' || this.itemName === 'Tablet'" for="selectedItem" ref="itemVisible">
                Select the brand of your <span>{{this.itemName}}</span> :
              </h1>
              <h1 v-if="this.itemName === 'PC'" for="selectedBreed" ref="itemVisible">
                Select the type of your <span>{{this.itemName}}</span> :
              </h1>
              <select
                ref="brand"
                class="form-control"
                id="selectedBrand"
                v-model="itemFormInfo.selectedBrand"
                @change="onChangeBrand($event)">
                <option v-for="brand in filteredBrand" v-bind:key="brand.name">{{ brand.name }}</option>
              </select>
              <div v-show="this.isBrandSelected">
                <h1>What are you going to use your 
                  <span>{{itemName}}</span> for ?
                </h1>
                <input
                  type="text"
                  id="componentName"
                  ref="componentName"
                  class="form-control fields"
                  style="text-transform: capitalize"
                  v-model="itemFormInfo.component"
                  @keypress="formChange($event)"
                />
                <div class="loader-spinner" v-if="loading">
                  <app-loader/>
                </div>
              </div>
            </div>
          </div>
          <div class="service-options" v-show="isComponentCompleted">
            <div class="from-group">
              <h1>
                Here are the options for your <span>{{this.itemFormInfo.component}}</span> :
              </h1>
              <div class="services">
                <div class="column-service" v-for="option in options" v-bind:key="option.name">
                  <div class="service-name">{{option.name}}</div>
                  <div class="service-price">{{option.price.toString().replace(".", ",")}} </div>
                </div>
              </div>

这是我的第一个方法

    onChangeItem(event) {
      let item = event.target._value;
      this.itemName = this.getItemName(item);      
      if (this.isItemSelected = true) {
        this.isItemSelected = false;
        this.isComponentCompleted = false;
        this.isLoaderFinished = false;
        this.itemFormInfo.name = ""
      }
    this.$refs.item.focus();
    },

在我控制我的第一个输入的这个函数中，焦点工作正常，但它 returns 我通过控制台出现以下错误：

"this.$refs.item.focus is not a function at VueComponent.onChangeItem"

我看到一些类似案例的参考资料，其中涉及 setTimeout 中的参考资料或使用 this.$nextTick(() => 方法，但它在我的情况下不起作用。

我做错了什么？一旦我选择了第一个输入的值，我如何才能专注于下一个 select 与 ref 品牌？

感谢大家的宝贵时间和提前帮助

Answer 1

一旦我选择了第一个输入的值，我如何才能专注于下一个 select 与 ref 品牌？

您想将焦点放在 brand 上，但您的 onChangeItem 处理程序正在调用 this.$refs.item.focus()（试图将焦点放在 item 上）。我觉得很奇怪...

错误的原因是您在 v-for.
中使用了 ref Docs：当在 elements/components 上与 v-for 一起使用时，注册的引用将是一个包含 DOM 个节点或组件实例的数组

所以访问 item ref 的正确方法是 this.$refs.item[index].focus().

请注意，现在 v-for refs do not guarantee the same order as your source Array - 您可以在问题讨论中找到一些解决方法...

VUE 的 focus() 方法 return 控制台错误？如何正确使用？

VUE's focus() method return a console error? How to use it correctly?

select

focus

input

vue.js