【问题标题】:Space character doesn't get recognized in lodash's debounce method with b-taginput in buefy?lodash 的 debounce 方法在 buefy 中使用 b-taginput 无法识别空格字符?
【发布时间】:2023-03-07 21:21:01
【问题描述】:

我正在使用 buefy 的 b-taginput 和 lodash 的 debounce 方法在 @typing 事件期间从 api 源获取数据。问题是当我在输入字段中按空格键时,在 debounce 方法中输入字符未被识别为实际字符。

 <b-field label="Roles">
      <b-taginput
        :value="this.objectData.roles"
        :data="filteredTags"
        autocomplete
        field="role"
        icon="label"
        placeholder="add role..."
        @focus="getAsyncRole"
        @typing="getAsyncRole"
        @input="(newValue) => {updateValue(newValue, 'roles')}"
      >
        <template slot-scope="props">
          <p>{{props.option.role}}</p>
        </template>
        <template slot="empty">There are no items</template>
      </b-taginput>
    </b-field>
 getAsyncRole: debounce(function(name) {
       console.log('inside getAsyncRole and name.length is  '+name.length) // the length is 0 when i hit 
                                                                              spacebar but why? 
      if (!name.length) {
        this.filteredTags = [];
        return;       //exits the function if length of input is zero
      }
      this.isFetching = true;
      api
        .getSearchData(this.sessionData.key,`/role/?filter={role} LIKE '%25${name}%25'`)
        .then(response => {
          console.log('response for getasync role is'+JSON.stringify(response))
          this.filteredTags = [];
          response.forEach(item => {
             
            this.filteredTags.push(item);
          });
        })
        .catch(error => {
          this.filteredTags = [];
          throw error;
        })
        .finally(() => {
          this.isFetching = false;
        });
    }, 500),

如果我输入任何字母字符,上述代码就可以工作(即,它会根据输入字符为我提供可能的自动完成结果)。但我也希望它在我将空格键输入 b-taginput 时列出所有自动完成结果(总结果)。由于它不将空格字符识别为实际字符,name.length 变为零,然后它退出函数而不进行 api 调用。

注意:我注意到这个问题只发生在 b-taginput。在&lt;b-autocomplete&gt; 的情况下不会出现此问题。使用&lt;b-autocomplete&gt;,如果我按空格键,那么我会得到所有想要的结果。因此,我认为这个问题只针对 b-taginput。请为此提供解决方法提供帮助。

【问题讨论】:

    标签: vue.js buefy


    【解决方案1】:

    源代码表明@typing 在发出输入之前会对其进行修剪。这留下了几个选项,最好的一个(到目前为止)是预取未过滤的列表。有了列表,您就可以像示例代码一样进行过滤,在列表中搜索输入字符串。

    (示例代码有效,因为在每个字符串中都“找到”了键入空格发出的空字符串''

    考虑一下:您正在对 API 进行去抖动处理,因为您担心对它的打击太大。放弃去抖动,只需击中一次。担心获取所有标签太长而无法等待?只需等待一次,再也不要等待(考虑到您愿意在每个空白输入上都发生这种等待)。

    【讨论】:

    • 感谢您的回复。我会尝试您的建议。但是为什么当我点击空格键(空格字符)时,您认为 name.length 为零。我的意思是它也是一个有效的现有字符权?当我点击空格键 name.length 变为 1 时,使用 b-autocomplete 时也不会出现此问题。
    • @VigneshSwaminathan - 查看标签输入的源代码行 343。输入在发射之前被修整。(github.com/buefy/buefy/blob/dev/src/components/taginput/…)。我没有阅读所有自动完成功能,但那里没有明显的修剪。 (见第510行,在文件github.com/buefy/buefy/blob/dev/src/components/autocomplete/…中搜索trim)
    • @danh- 空白或无输入意味着它应该退出该功能而不显示任何自动完成结果。只有当我按下空格键时我才希望发生未过滤的搜索。所以我该如何处理有这个要求吗?
    • 根据我们找到的源代码,有几个选择:fork 库并更改它 (yuck)、使用其他组件重写 (meh) 或预取,这就是它的预期使用方式。见编辑。
    猜你喜欢
    • 2018-10-11
    • 2019-11-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-13
    • 2019-11-21
    • 2022-08-13
    相关资源
    最近更新 更多