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

Question

I am making the selection of a product, in the-select select the product and then you must pass the focus to the quantity input, I use ref but it has not worked for me

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>

// methods

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

Answer 1

A useful trick when you need to modify the UI in a way external to Vue is to call nextTick. In your case, this would defer the call to focus until after the UI has finished updating after the select.

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