CODEWITHSUNDEEP
javascriptvue.jsfrontendvue-component
Juliette
Juliette

Reputation: 4439

storing user's dropdown value in vue

I have the code below that creates a dropdown menu (ignore the single quotes). The dropdown looks like this on my end.

undefined the logging output here. What can I do to make this work?

Upvotes: 0

Views: 33

Answers (1)

maxim
maxim

Reputation: 626

You have your @click event on a wrong element.. your @ckick events should be added to <a> tags, so you could pass a team_member.email directly to your method.

<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>

and the method should be:

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

p.s. if you would need more then just email, you could pass an entire team_member object like: @click="selectUsersInOrganization(team_member)

so your method could have access to other members's properties

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

Upvotes: 1

Related Questions