установить фокус на ввод после изменения выбора, используя элемент пользовательского интерфейса и vue js - PullRequest
0 голосов
/ 31 января 2020

Я делаю выбор продукта, в-выберите выберите продукт, а затем вы должны передать фокус на ввод количества, я использую ссылку, но она не работает для меня

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();  
  },

1 Ответ

1 голос
/ 31 января 2020

Полезный трюк, когда вам нужно изменить пользовательский интерфейс способом, внешним по отношению к Vue, - это вызвать nextTick . В вашем случае это отменит вызов на focus до тех пор, пока пользовательский интерфейс не завершит обновление после выбора.

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