温馨提示:本文翻译自stackoverflow.com,查看原文请点击:html - How can I make a dropdown like Github's collaborators menu where the input text is not exactly the s
bootstrap-4 html input vue.js dropdown

html - 我该如何像Github的合作者菜单那样制作一个下拉菜单,其中输入文本不完全是s

发布于 2020-03-27 10:56:53

我有一个带有引导程序下拉菜单的HTML5输入字段。在正常的引导程序下拉菜单中选择下拉菜单项时,此操作将使用与该下拉菜单项相同的文本填充输入字段。如何执行选择下拉项的操作,将输入字段中的文本更新为与下拉项中的文本不完全相同的字符串?例如,github协作者下拉列表在输入字段中仅显示用户名,但在下拉项中显示用户名和用户名。

例如,转到您拥有或已分叉的任何github存储库。选择设置,然后选择协作者。

查看更多

查看更多

提问者
GNG
被浏览
264
Loïc Monard 2019-07-03 23:02

假设您有一些类似的数据:

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作为示例。