Как сделать выпадающий список, например, в меню соавторов Github, в котором вводимый текст не совпадает с текстом выпадающих элементов?

Question

У меня есть поле ввода HTML5 с выпадающим меню начальной загрузки.При выборе выпадающего элемента в обычном выпадающем меню начальной загрузки это действие заполняет поле ввода тем же точным текстом, что и в этом выпадающем элементе.Как я могу сделать действие выбора выпадающего элемента, чтобы обновить текст в поле ввода до строки, которая не совпадает с текстом в выпадающем элементе?Например, раскрывающийся список сотрудников github отображает только имя пользователя в поле ввода, но отображает имя пользователя и имена пользователей в элементах раскрывающегося списка.

Например, перейдите в любой свой репозиторий github, который у вас есть или разветвлен.,Выберите «Настройки», а затем «Соавторы».

Answer 1

Представьте, что у вас есть такие данные:

users: [
  {
    'name': 'Thomas Edison',
    'email' 'thomas@edison.com',
    'selected': false
  },
  {
    'name': 'William Thomson',
    'email': 'william@thomson.com'
    'selected': false
  }
]

Тогда вам просто нужно просмотреть ваши данные в элементе v-for:

<div v-for="user in users" class="dropdown">
  <span class="user" @click="user.selected = true">{{ user.email }} - {{ user.name }}</span>
</div>

Затем в вашем поле ввода вам нужно перебрать пользователей, для которых для выбранного свойства установлено значение true, и в качестве примера вывести только user.name.