Как передать данные в модальное окно?

Question

[Виктор Л]

Использую связку nuxt.js + vuetifyjs
есть таблица с данными orders

<tbody>
<tr v-for="(item, key) in orders" :key="key">
     <td>{{ item.time }}</td>
     <td>{{ item.t }}</td>
     <td>{{ item.qt }}</td>
      <td>{{ item.s }}</td>
      <td><v-btn color="purple" dark>Подробнее</v-btn></td>
</tr>
</tbody>

нужно из orders.items передать по кнопке "Подробнее" в модальное окно
подскажите как это реализовать

Answer 1

[Дима Паутов]

Грубый пример, но суть понятна. vuetifyjs я не знаю, но думаю вы сможете дальше разобраться.

Генерировать событие

this.$emit('openModal', item); //openModal - имя события, item - объект с данными

Слушать событие в модальном окне

this.$root.on('openModal', (item) => {
this.modalData = item; // modalData - это свойство объекта дата, куда мы положим переданный объект, что бы после разложить все данные в шаблоне
});

Comments

[Виктор Л]

Модальное окно вообще лучше компонентом я так понимаю сделать ?

[Дима Паутов]

Виктор, в данном случае, если вам компонент рисуется 1 раз, то, можно прям в него положить. Я просто всей вашей компонентной структуры не знаю

[Виктор Л]

в orders хранятся вообще заявки, orders.items массив с каждой номенклатурой
в таблице короткая информация по заявке (дата номер) и вот для каждой заявки по кнопке будет выводится полная информация

"yoVPPeHCs9MOGJCh0pfeEVCQEd53" : {
      "info" : {
      },
      "orders" : {
        "-L-AfBB8DAnQr6mNtZFn" : {
          "created_at" : 1512024355,
          "items" : {
            "-L-AfB_imdWJzlzqMC1k" : {
              "code" : "00-00000028",
              "cost" : 1880,
              "name" : "Фильтр IS16F сетчатый Ду 40",
              "qt" : 1,
              "sum" : 1880
            },
            "-L-AfBi_sg-G1DMTyqPb" : {
              "code" : 18001001,
              "cost" : 969,
              "name" : "Фильтр магнит. муфтов. ФММ Ду 25",
              "qt" : 1,
              "sum" : 969
            },
            "-L-AfBrsjB-gwPb-NiVK" : {
              "code" : 18002001,
              "cost" : 1150,
              "name" : "Фильтр магнит. муфтов. ФММ Ду 32",
              "qt" : 1,
              "sum" : 1150
            }
          },
          "status" : "не подтвержденная",
          "type" : "по прайс листу"
        }       
      }
    }

Answer 2

[Дмитрий Кузнецов]

Не поверите, буквально вчера задался таким-же вопросом.
Решить можно 2 способами:
1. При клике вызывать функцию, которая передаёт объект item и вы его передаёте в другую переменную (в data) и спользуете как надо.
2. Подошёл только в моём случае, но всё таки скажу: при клике вызываю функцию, которая делает запрос в бд и эти данные вставляем в модалку, с использованием v-if для модальки.

Comments

[Виктор Л]

то есть Вы предлагаете при инициализации Модалки передавать в нее ключ по которому делать заброс в БД и получать нужные данные?

[Дмитрий Кузнецов]

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