Question

是否存在一种属性或方法将阻止Vuetify Autocomplete过滤要显示的项目，直到满足特定条件（例如键入3个字符）为止？我有一个基本的解决方案，但我真的希望有另一个解决方案。在最终用户键入至少三个字符之前，我不希望显示任何内容。我有一个解决方案，例如：

   watch: {
   search (val) {
  if(val.length > 2){
    this.minimumCharacter = 'show'
  }else{
    this.minimumCharacter = 'null'
  }

在我的HTML中：

        <template
      v-if="minimumCharacter === 'show'"
      slot="item"
      slot-scope="{ item, tile }"
    >

自动完成功能肯定在某个地方可以处理此属性。当您拥有成千上万的记录时，您真的不希望在键入一个字符后立即显示所有内容。但是我已经搜索了https://vuetifyjs.com/en/components/autocompletes#autocomplete，除非他们称它为我无法与之联系的东西。

Answer 1

自动完成功能肯定在某个地方可以处理此属性。当您拥有成千上万的记录时，您真的不希望在键入一个字符后立即显示所有内容。但是我已经搜索了https://vuetifyjs.com/en/components/autocompletes#autocomplete，除非他们称它为我无法与之联系的东西。

我找不到这样的属性，但是对我来说，这个变体效果很好：

watch: {
  search (val) {
  if(val.length > 2){
     //search code
  }

P.S。过滤器在搜索后开始工作，因此无法解决当前任务以阻止搜索。

Answer 2

您可以使用filter prop来实现自己的filter函数，如果文本长度小于3：总是返回false。

(item, queryText, itemText) => {
    const hasValue = val => val != null ? val : ''

    const text = hasValue(itemText)
    const query = hasValue(queryText)

    if(queryText < 3) return false;

    return text.toString()
      .toLowerCase()
      .indexOf(query.toString().toLowerCase()) > -1
  }

筛选前Vuetify自动完成最小字符

2 个答案: