Vuetify autocomplete похожие элементы не отображаются

В моем случае у меня есть пользовательские сообщения с похожим заголовком из моего локального 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.info(err)
          })
          .finally(() => (this.isLoading = false))
      }
    }
  }
</script>

Как я могу показать в своем автозаполнении все похожие сообщения по названию?

Я не понимаю, как пользователь различает одинаковые тексты? вы просто хотите, чтобы они появились несколько раз?

Michael 15.07.2019 14:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
5
1
4 168
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Попробуйте установить 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

Обратите внимание, что автозаполнение также пытается найти точные совпадения в ваших элементах. Возможно, для предложений на стороне сервера вам следует использовать v-combobox.

Другие вопросы по теме