Javascript 聚焦vuetify扩展面板内的输入

我一直在尝试让我在v-expansion-panels中的输入在用户点击enter键后集中在下一个面板上：我已设法使其打开，以便下一个扩展面板打开，但即使我通过$refs API获得正确的输入，我似乎也无法集中输入。以下是我的一些代码：

<v-expansion-panels v-model="openedPanel" :accordion="true">
              <v-expansion-panel class="panel">
                <!-- Unidade Produtiva -->
                <v-expansion-panel-header>Unidade produtiva</v-expansion-panel-header>
                <v-expansion-panel-content eager>
                  <label class="panel-label">Número do Talhão</label>

                  <v-container>
                    <v-row>
                      <v-col class="spacing-container" cols="12" md="12">
                        <ValidationProvider name="production-field" rules="required">
                          <input
                            ref="field"
                            v-on:keyup.enter="$refs.height.focus"
                            class="default-input"
                            v-model="production.field"
                            type="number"
                            placeholder="Ex.: 1"
                          />
                        </ValidationProvider>
                      </v-col>
                    </v-row>
                  </v-container>
                  <label class="panel-label">Tamanho do Canteiro</label>
                  <v-container>
                    <v-row>
                      <v-col class="spacing-container" cols="12" md="6">
                        <label class="input-label">Comprimento (m)</label>
                        <ValidationProvider name="production-height" rules="required">
                          <input
                            ref="height"
                            v-on:keyup.enter="$refs.width.focus"
                            class="default-input"
                            v-model="production.height"
                            type="number"
                            step="0.001"
                            min="0.001"
                            placeholder="Ex.: 1.23"
                          />
                        </ValidationProvider>
                      </v-col>
                      <v-col class="spacing-container" cols="12" md="6">
                        <label class="input-label">Largura (m)</label>
                        <ValidationProvider name="production-width" rules="required">
                          <input
                            ref="width"
                            v-on:keyup.enter="$refs.spacew.focus"
                            class="default-input"
                            v-model="production.width"
                            type="number"
                            step="0.001"
                            min="0.001"
                            placeholder="Ex.: 1.23"
                          />
                        </ValidationProvider>
                      </v-col>
                    </v-row>
                  </v-container>
                  <label class="panel-label">Espaçamento</label>
                  <v-container>
                    <v-row>
                      <v-col class="spacing-container" cols="12" md="6">
                        <label class="input-label">Entre linhas (cm)</label>
                        <ValidationProvider name="production-spacew" rules="required">
                          <input
                            ref="spacew"
                            v-on:keyup.enter="$refs.spaceh.focus"
                            class="default-input"
                            v-model="production.spacew"
                            type="number"
                            step="0.001"
                            min="0.001"
                            placeholder="Ex.: 1.23"
                          />
                        </ValidationProvider>
                      </v-col>
                      <v-col class="spacing-container" cols="12" md="6">
                        <label class="input-label">Entre colunas (cm)</label>
                        <ValidationProvider name="production-spaceh" rules="required">
                          <input
                            ref="spaceh"
                            v-on:keyup.enter="handleNext(1, 'name')"
                            class="default-input"
                            v-model="production.spaceh"
                            type="number"
                            step="0.001"
                            min="0.001"
                            placeholder="Ex.: 1.23"
                          />
                        </ValidationProvider>
                      </v-col>
                    </v-row>
                  </v-container>
                </v-expansion-panel-content>
              </v-expansion-panel>
              <v-expansion-panel class="panel">
                <!-- Nome do produto -->
                <v-expansion-panel-header>Nome do produto</v-expansion-panel-header>
                <v-expansion-panel-content eager>
                  <label class="panel-label">Nome</label>
                  <ValidationProvider name="production-name" rules="required">
                    <input
                      ref="name"
                      v-on:keyup.enter="handleNext(2, 'bed')"
                      class="default-input"
                      v-model="production.name"
                      type="text"
                      placeholder="Ex.: Macaxeira"
                    />
                  </ValidationProvider>
                </v-expansion-panel-content>
              </v-expansion-panel>
            </v-expansion-panels>

---

编辑：focus to focus（），它仍然无法解决此问题。

似乎必须使用

setTimeout

等待

完成转换

例如：

。。。
handleNext（索引、重新输入）{
if（this.openedPanel==索引）{
这是。$refs[refInput].focus（）；
}否则{
这个.openPanel（索引）；
设置超时（（）=>{
这是。$refs[refInput].focus（）；
}，350）；//默认情况下，vuetify使用300ms进行转换
}
}
...

---

它应该是

focus（）

而不是

focus

。看，是的，我是那样使用它的，但它仍然不能像预期的那样工作

openPanel(index) {
      this.openedPanel = index;
    },
    closeAllPanels() {
      this.openedPanel = null;
    },
    handleNext(index, refInput) {
      this.closeAllPanels();
      this.openPanel(index);
      this.$refs[refInput].focus();
      console.log(refInput);
      console.log(this.$refs[refInput]);
    },