source

Vuetify 자동 완성 유사 항목이 표시되지 않습니다.

goodcode 2022. 9. 3. 13:17
반응형

Vuetify 자동 완성 유사 항목이 표시되지 않습니다.

경우 로컬 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>

유사한 모든 투고를 제목별로 자동 완성하려면 어떻게 해야 합니까?

설정 시도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>

확인하다

또한 자동 보완 장치는 항목에서 정확히 일치하는 항목을 찾으려고 시도합니다.서버측의 제안에는,v-combobox.

언급URL : https://stackoverflow.com/questions/57038191/vuetify-autocomplete-similar-items-are-not-showing

반응형