1

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?

sandrooco
  • 8,016
  • 9
  • 48
  • 86
Gaurav
  • 149
  • 12

1 Answers1

1

It's actually quite simple:

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

(See inline handlers in docs)

tony19
  • 125,647
  • 18
  • 229
  • 307
sandrooco
  • 8,016
  • 9
  • 48
  • 86
  • 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 – Gaurav May 17 '21 at 08:16
  • 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. – sandrooco May 17 '21 at 08:24
  • I have edited my question. Can you please so and say if I am going right way. – Gaurav May 17 '21 at 08:31
  • 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. https://stackoverflow.com/questions/51271337/bootstrap-vue-how-to-pass-data-to-modal – sandrooco May 17 '21 at 09:05