在vue中存储用户的下拉值

Question

我有下面的代码创建了一个下拉菜单（忽略单引号）。在我这边，下拉菜单看起来像 this。

未定义此处的日志输出。我该怎么做才能完成这项工作？

Answer 1

您的 @click 事件发生在错误的元素上.. 你的@ckick 事件应该添加到 <a> 标签，这样你就可以将 team_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)
}

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

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

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

在vue中存储用户的下拉值

storing user's dropdown value in vue

javascript

frontend

vue.js

vue-component