Vuetify 自动完成类似项目未显示

Posted 2023-02-23

【中文标题】Vuetify 自动完成类似项目未显示

【英文标题】：Vuetify autocomplete similar items are not showing

【发布时间】：2019-11-24 01:33:02

【问题描述】：

我的本​​地 API 有类似标题的自定义帖子，我尝试通过来自 items 数组的搜索查询显示帖子。

数据：

    "count": 5,
    "entries": [
        
            "id": 3,
            "title": "Senior developer Python"
        ,
        
            "id": 4,
            "title": "Senior developer Python"
        ,
        
            "id": 5,
            "title": "Senior developer Python"
        
    ]

Vuetify 自动完成代码：

  <v-autocomplete
    v-model="model"
    :items="items"
    :loading="isLoading"
    :search-input.sync="search"
    color="white"
    hide-no-data
    hide-selected
    item-text="Description"
    item-value="API"
    return-object
  ></v-autocomplete>

Javascript 代码：

<script>
  export default 
    data: () => (
      descriptionLimit: 60,
      entries: [],
      isLoading: false,
      model: null,
      search: null
    ),

    computed: 
      items () 
        return this.entries.map(entry => 
          const Description = entry.title.length > this.descriptionLimit
            ? entry.title.slice(0, this.descriptionLimit) + '...'
            : entry.title

          return Object.assign(, entry,  Description )
        )
      
    ,

    watch: 
      search (val)   
        // Items have already been requested
        if (this.isLoading) return

        this.isLoading = true

        // Lazily load input items
        fetch('https://api.website.org/posts')
          .then(res => res.json())
          .then(res => 
            const  count, entries  = res
            this.count = count
            this.entries = entries
          )
          .catch(err => 
            console.log(err)
          )
          .finally(() => (this.isLoading = false))
      
    
  
</script>

如何在自动填充中按标题显示所有类似的帖子？

【问题讨论】：

我不明白用户如何区分相同的文本？你只是想让它们出现几次？

【参考方案1】：

尝试将item-value 设置为id，例如：

 <v-autocomplete
    v-model="model"
    :items="items"
    :loading="isLoading"
    :search-input.sync="search"
    color="white"
    hide-no-data
    hide-selected
    item-text="Description"
    item-value="id"
    return-object
  ></v-autocomplete>

检查this pen