javascript - 将用户的下拉值存储在 vue 中

Question

我有下面的代码创建一个下拉菜单（忽略单引号）。我的下拉列表看起来像这样。

在此处未定义日志记录输出。我能做些什么来完成这项工作？

标签： javascriptvue.jsfrontendvue-component

Answer 1

您的@click事件发生在错误的元素上。您的 @ckick 事件应该添加到<a>标签中，因此您可以将 ateam_member.email直接传递给您的方法。

<div v-if="active" class="dropdown-content">
  <a v-for="team_member in org_team_members"
    :key="team_member.email"
    @click="selectUsersInOrganization(team_member.email)>
    {{ team_member.name }}
  </a>
</div>

方法应该是：

selectUsersInOrganization(memberEmail) {
 this.email = memberEmail
 console.log(memberEmail)
}

ps 如果您需要的不仅仅是电子邮件，您可以传递一个完整的team_member对象，例如： @click="selectUsersInOrganization(team_member)

因此您的方法可以访问其他成员的属性

selectUsersInOrganization(member) {
 this.email = member.email
 this.name = member.name
 console.log(member)
}