如何根据选择另一个下拉选项来聚焦搜索文本框 - vuejs

Question

在我的应用程序中，我必须根据名称和类别名称过滤产品。有一个搜索文本框和一个下拉选择框。在下拉选择框中，有两个选项 1。按名称搜索产品 2. 按类别名称搜索产品。根据选择的选项，搜索文本框将启用并聚焦。

模板代码

<el-form>
      <el-row :gutter="15"
              type="flex"
              class="search__product">
        <el-col class="filter_option">
            <app-select name="ProductFilter"
                        :options="filterOptions"
                        :selected="selectedSearchOption"
                        @onChange="onSearchOptionChange" />
        </el-col><el-col class="search_input">
            <el-input placeholder="Search product"
                      aria-label="Search product"
                      @keyup.enter.native="searchProduct"
                      v-model="filterText">
            </el-input>
        </el-col>
      </el-row>
    </el-form>

显示下拉值的方法

    get filterOptions(): OptionTypes[] {
    return [
      { label: 'Search by Product Name', value: 'Product' },
      { label: 'Search by Category Name', value: 'Category' }
    ]
  }

产品的搜索输入

searchProduct() {
    if (this.filterText !== '') {
      this.$store.dispatch('fetchProductsBySearchName', this.filterText)
    }
  }

下拉菜单的选项更改事件

    onSearchOptionChange(value) {
    this.selectedSearchOption = value
  }

这对于按名称搜索产品效果很好。现在，我想根据下拉选择来实现它，以启用搜索文本框并聚焦它。

Answer 1

注意答案有点特定于库 Element-ui 的 el-input：

您的选择将保持不变：

<app-select name="ProductFilter"
            :options="filterOptions"
            :selected="selectedSearchOption"
            @onChange="onSearchOptionChange" />

el 输入的用户参考：

<el-input ref="myInput"
          placeholder="Search product"
          @keyup.enter.native="searchProduct"
          v-model="filterText">

在你的方法中：

onSearchOptionChange(value) {
  this.selectedSearchOption = value

  // In multiple ways you can get this done (selecting `input` element)
  // use any one line mentioned below ;)
  this.$refs.myInput.$el.firstElementChild.focus();
  this.$refs.myInput.$el.lastElementChild.focus();
  this.$refs.myInput.$el.children[0].focus();

  this.$refs.myInput.$el.querySelector('input').focus(); // my favourite, future proof 
}

更新

正如@charlie 所说，您可能需要将代码移至this.$nextTick：

onSearchOptionChange(value) {
  this.selectedSearchOption = value

  this.$nextTick(() => { 
    // In multiple ways you can get this done (selecting `input` element)
    // use any one line mentioned below ;)
    this.$refs.myInput.$el.firstElementChild.focus();
    this.$refs.myInput.$el.lastElementChild.focus();
    this.$refs.myInput.$el.children[0].focus();

    this.$refs.myInput.$el.querySelector('input').focus(); // my favourite, future proof 
  })
}