在更改 select 后，使用元素 ui 和 vue js 将焦点设置为输入

Question

我正在制作产品的select离子，在-select select产品中然后你必须将焦点传递给数量输入，我使用ref但是它对我不起作用

https://element.eleme.io/#/es/component/select

                <el-select
                      ref="select1"
                      v-model="EntradaProducto.ProductoSucursalId"
                      filterable
                      style="width: 50%"
                      remote
                      @change="ChangueSelectProduct"
                      placeholder="Escriba nombre del producto"
                      :remote-method="remoteMethodSearchProduct"
                      :loading="loadingSearchProduct">
                      <el-option
                        v-for="item in optionsProducts"
                        :key="item.id"
                        :label="item.descripcion"
                        :value="item.id">
                        <span style="float: left">{{ item.marca +' | '+ item.descripcion }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">S/ {{ item.precio }}</span>

                      </el-option>


                </el-select>



                           <el-input
                              ref="cantidad1"
                              type="number"
                              style="width: 90px"
                              placeholder="Cant"
                              v-model="EntradaProducto.Cantidad"

                            ></el-input>

// 方法

  ChangueSelectProduct(){       
     this.$refs.cantidad1.select();
     this.$refs.cantidad1.focus();  
  },

Answer 1

当您需要以 Vue 外部的方式修改 UI 时，一个有用的技巧是调用 nextTick。在您的情况下，这将推迟对 focus 的调用，直到 UI 在 select 之后完成更新。

ChangueSelectProduct() {
  this.$nextTick(() => this.$refs.cantidad1.focus())
}

在更改 select 后，使用元素 ui 和 vue js 将焦点设置为输入

set focus on input after change of select, using element ui and vue js

javascript

vue.js

element-ui