Question

我正在选择一种产品，在选择中选择一种产品，然后您必须将焦点传递到数量输入上，我使用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完成更新为止。

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

选择更改后，使用元素ui和vue js

1 个答案: