Vuetify 自动完成类似项目未显示 [英] Vuetify autocomplete similar items are not showing

问题描述

在我的案例中，我有来自本地 API 的具有类似标题的自定义帖子，并且我尝试通过来自 items 数组的搜索查询来显示帖子.

I have custom posts with similar title in my case from my local API and I've tried to show posts by search query from items array.

数据:

{
    "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>

如何在我的自动完成功能中也按标题显示所有类似的帖子?

How I can show in my autocomplete all similar posts by title also?

推荐答案

尝试将 item-value 设置为 id 如下:

Try to set item-value to id like :

 <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>

检查这支笔

这篇关于Vuetify 自动完成类似项目未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！