如何获取或检索 vue js 中 load dash 的 debounce 方法中的类型值？

编程问答 2022-05-31

问题描述

如何获取buefy的b-autocomplete组件@typing事件中输入的input？

在@typing 事件期间使用显式参数调用 debounce 方法，如下所示-

<b-field label="Location">
      <b-autocomplete
        :data="dataLocation"
        placeholder="select a location..."
        field="id"
        :loading="isFetching"
        :value="this.objectData.location"
        @typing="getAsyncData(`location`,`?filter= UPPER({id}) LIKE UPPER('%25${name}%25') OR UPPER({description}) LIKE UPPER('%25${name}%25')`)"
        @input="(newValue) => {updateValue(newValue,'location')}"
      >
        <template slot-scope="props">
          <div class="container">
            <p>
              <b>ID:</b>
              {{props.option.id}}
            </p>
            <p>
              <b>Description:</b>
              {{props.option.description}}
            </p>
          </div>
        </template>
        <template slot="empty">No results found</template>                
      </b-autocomplete>
    </b-field>

去抖动功能

   getAsyncData: debounce(function(name,entity,queryparam) {
                console.log('event.target'+event.target)
                console.log('name is'+name)
                console.log('entity is'+entity)
                console.log('queryparam is'+queryparam)
                if (!name.length) {
                  this.data = [];
                  return;
                }
                this.isFetching = true;
                api
                  .getSearchData(this.sessionData.key,`/${entity}/${queryparam} `)
                  .then(response => {
                    this.data = [];
                    response.forEach(item => {
                       
                      this.data.push(item);
                    });
                   
                  })
                  .catch(error => {
                    this.data = [];
                    throw error;
                  })
                  .finally(() => {
                    this.isFetching = false;
                  });
              },500),

在上面的代码中，debounce 函数中的 'name' 参数在 @typing 事件期间没有捕获输入。但是，当调用 debounce 函数时没有像这样的任何参数，它可以工作-

 @typing="getAsyncData"

但是由于我试图将 debounce 函数作为通用函数，我需要明确地将参数传递给函数，以便没有任何硬编码。请帮忙？

解决方法

@typing="getAsyncData('location','?filter= UPPER({id}) LIKE UPPER('%25${name}%25') OR UPPER({description}) LIKE UPPER('%25${name}%25')')"

...正在通过内联语句处理事件（代码按原样执行）。您需要像这样自己将原始事件传递给您的方法：

@typing="getAsyncData($event,'location','?filter= UPPER({id}) LIKE UPPER('%25${name}%25') OR UPPER({description}) LIKE UPPER('%25${name}%25')')"

仅使用方法名称 (@typing="getAsyncData") 时，Vue 会自动执行此操作...

debouncejavascriptvue.js