В этой статье мы увидим, как легко передать данные из списка или из таблицы в модальное окно в VueJs.

Я думаю, что одной из самых частых ситуаций, с которыми я сталкивался, так как я работаю в веб-разработке, была ситуация, когда мне нужно было передать данные из списка или таблицы и отобразить их в модальном режиме.

Давайте посмотрим на простом примере, как мы можем сделать это с помощью фреймворка VueJs.

❗️ В этом примере мы будем использовать уже готовый модальный встроенный Bootstrap Vue.

Создание таблицы

Во-первых, мы создадим простой список в виде таблицы, где мы будем использовать некоторые поддельные данные.

Давайте представим, что у нас есть список пользователей и если мы хотим нажать на кнопку «Еще», мы видим какую-то скрытую дополнительную информацию о конкретном человеке.

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

Как вы, возможно, уже знаете, для создания списка в VueJs нам пришлось бы использовать v-for, который будет перебирать каждый объект массива.

В результате у нас есть таблица, в которой указаны имя, фамилия, возраст пользователя и кнопка «Еще».

Если у вас нет реальных данных для отображения в таблице, вы можете создать фальшивые данные.

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.",
},
],

Создание модального окна

Есть много разных способов создать модальное окно с помощью CSS или любой другой библиотеки, но в этом примере мы будем использовать модальное окно Bootstrap.

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

Лучше всего создать отдельный компонент Vue и импортировать его в наш родительский компонент.

Но сначала давайте взглянем на модальную составляющую.

В шаблоне мы бы отображали имя пользователя и некоторую дополнительную информацию об этом пользователе. И, как видите, чтобы отобразить его, нам пришлось бы использовать реквизиты, которые мы получаем от родительского компонента (наша таблица).

❗️Обратите внимание, всегда лучше уточнять тип реквизита, но это не обязательно.

Соединение таблицы и модального окна

Последним и наиболее важным шагом будет соединение между двумя компонентами и передача данных от одного к другому.

Во-первых, мы должны импортировать модальное окно в наш родительский компонент.

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

И конечно объявить это в компонентах.

components: {
    ModalDetails,
}

❗️Очень важно не вставлять модальное окно в цикл v-for, потому что при каждом клике ваше модальное окно будет открываться столько раз, сколько длина вашего массива.

Как вы уже видели, мы добавили событие клика на кнопку Еще с параметром пользователя.

Давайте рассмотрим функцию события click.

methods: {
showDetails(user) {
   this.$bvModal.show("modal-details");
   this.modalData = user;
},
},
  • Мы инициируем открытие нашего модального окна по его идентификатору.
  • Мы устанавливаем нашего пользователя в другую переменную

Чтобы иметь возможность использовать информацию о конкретном пользователе, мы должны передать эту информацию в модальное окно в качестве свойства.

<ModalDetails :user="modalData" />

И, конечно же, не забудьте объявить modalData в ваших данных.

data() {
  return {
   modalData:null
 }
}

😊 И волиа!

Я надеюсь, что этот пример был полезен для вас. Спасибо, что читаете 😊