В этой статье мы увидим, как легко передать данные из списка или из таблицы в модальное окно в 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 } }
😊 И волиа!
Я надеюсь, что этот пример был полезен для вас. Спасибо, что читаете 😊