How to Pass the Data From the Table to the Modal (VueJs)

In this article, we will see how to easily pass the data from the list or from the table to the modal in VueJs.

I think one of the most frequent situations that I have got since I am working in web development it was the situation when I had to pass the data from the list or a table and display it in the modal.

Let’s see with a simple example, how we can do that with the help of the VueJs framework.

❗️ In this example we will use an already ready modal built-in Bootstrap Vue.

Creating a table

First, we will create a simple list in the form of a table where we will use some fake data.

Let’s imagine that we have a list of users and if we want to click on the button “More”, we see some hidden additional information about a particular person.

<div class="table-list">
   <div 
   v-for="(user, index) in users"
   :key="index"
   class="my-3 bg-light p-3 "
   >
   <div class="row">
      <div class="col">{{ user.firstname }}</div>
      <div class="col">{{ user.lastname }}</div>
      <div class="col">{{ user.age }}</div> 
      <div class="col"> 
         <b-button @click="showDetails(user)">More</b-button>
      </div>
   </div>
  </div>
</div>

As you may already know, in order to create a list in VueJs, we would have to use a v-for which will loop through each object of an array.

In the result, we have a table that shows the user’s first name, last name, age, and a button “More”.

If you don’t have any real data to display in the table, you can create fake data.

users: [
{
firstname: "John",
lastname: "Smith",
age: 25,
about: "Lives in England.",
},
{
firstname: "Mary",
lastname: "Anderson",
age: 41,
about: "Likes nature and reading books.",
},
{
firstname: "Anthony",
lastname: "Adams",
age: 16,
about: "Study well and know what he wants.",
},
],

Creating a modal

There are many different ways to create a modal with the help of CSS or any other library, but in this example, we will use a Bootstrap modal.

<template>
<div>
  <b-modal id="modal-details" hide-header>
    <div class="d-block">
      <h1>{{ user.firstname }}</h1>
      <h3>{{ user.about }}</h3>
    </div>
  </b-modal>
</div>
</template>
<script>
export default {
name: "ModalDetails",
props: {
   user: {
      type: Object,
   },
},
};
</script>

The best practice would be to create a separate Vue component and import it into our parent component.

But first, let’s take a look at the modal component.

In the template, we would display the name of the user and some additional information about this user. And as you can see, to be able to display it, we would have to use props that we are getting from the parent component (our table).

❗️Please note, that it is always better to precise the type of the prop but it is not obligated.

Connecting the table and the modal

The final and the most important step would be the connection between the two components and passing the data from one to the other.

First, we have to import the modal into our parent component.

import ModalDetails from "@/components/ModalDetails.vue";

And of course to declare it in the components.

components: {
    ModalDetails,
}

❗️It is very important to not insert your modal in the v-for loop because on each click your modal will be opened as many times as the length of your array.

As you have already seen, we have added a click event on the “More” button with a parameter of the user on it.

Let’s take a look at the function of the click event.

methods: {
showDetails(user) {
   this.$bvModal.show("modal-details");
   this.modalData = user;
},
},

• We trigger an opening of our modal by its id.
• We set our user to the other variable

To be able to use the information about a particular user, we have to pass this information to the modal as a prop.

<ModalDetails :user="modalData" />

And of course, do not forget to declare the modalData in your data.

data() {
  return {
   modalData:null
 }
}

😊 And volià!

I hope this example was useful for you. Thank you for reading 😊