Vue JS: Passing the current object of loop on click

Question

I have a data where I am using loop. Admin will see a pop up if s/he clicks on the user section. I have following code:

In user list page

<template>
   <header class="headings">
    <div class="headings_title">
        <h3 class="text-center"> User List</h3>
        <div class="text-center" v-for="user in users" :key="user.id">
          <div class="user-section" @click="showModel">
            <User :user="user"/>
          </div>
       </div>
    </div>
   </header>
</template>

The User component is working and user name, address has been displayed. But if the admin clicks on the particular user s/he has to be able to see other information related to the user s/he clicks. I want to pass user data in the modal also so that I can show other details related to the user. How can I do that?

tony19 · Accepted Answer · 2022-07-16 02:41:23Z

1

It's actually quite simple:

<div class="user-section" @click="showModel(user)">...</div>

(See inline handlers in docs)

edited Jul 16, 2022 at 2:41

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 17, 2021 at 8:08

sandrooco

8,88611 gold badges56 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gaurav Over a year ago

the model is in another page so do I have to pass anything from UserList component and receive anything in UserModal component? Because simply doing this does not work

sandrooco Over a year ago

We don't know how your showModel function looks so it's kind of hard to say. Might be a whole new question. Also: models and modals are not the same - take care which one you use.

Gaurav Over a year ago

I have edited my question. Can you please so and say if I am going right way.

sandrooco Over a year ago

This really was a whole new question, sorry. Look for "How to pass data to bootstrap vue modal". The "Passing the current object of loop on click" is answered. stackoverflow.com/questions/51271337/…

Collectives™ on Stack Overflow

Vue JS: Passing the current object of loop on click

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related