Как связать записи таблицы с диалогом в Vuetify

Как получить динамические данные из таблиц в диалоге Vuetify. У меня есть таблица с данными

    <td class = "text-xs-left">{{ props.item.id }}</td>
    <td class = "text-xs-left">{{ props.item.title }}</td>
    <td class = "text-xs-left">{{ props.item.quantity }}</td>
    <td class = "text-xs-left"> <Dialog :to = "'/products/' + props.item.id"></Dialog></td>

и у меня есть компонент Dialog.Vue. Как подключиться к щелчку, чтобы открыть конкретную запись в диалоге?

javascript vue.js modal-dialog vue-component vuetify.js

26.07.2018 10:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 011

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Диалог нужно разместить за пределами таблицы. В таблице должна быть кнопка, запускающая диалог. Например, @ click = "dialog_visible = true", и если вам нужен динамический диалог, вы можете установить параметры диалога в методе @click.

<template slot = "items" slot-scope = "props"> <td class = "text-xs-left"> {{props.item.id}} </td> <td class = "text-xs-left" "> {{props.item.title}} </td> <td class = " text-xs-left "> {{props.item.quantity}} </td> <td class = " text-xs-left " ": id = " props.item.id "> <v-btn @ click = 'dialog = true; fun ($ event.target.id) 'color = "info" class = "table- btn"> Показать подробности </v-btn> </td> </template> Это мой новый код. Я отбрасываю тег диалога и добавляю прослушиватель @click. Просто мне нужны динамические данные из таблицы

— 26.07.2018 15:59

Вы можете передать данные как параметр функции и отправить их в диалог. Что-то вроде <button @ click = "openDialog (item)"> Открыть диалог </button>, а затем в функции openDialog вы можете указать this.dialog_data = item и получить доступ к выбранному элементу из диалога.

— 01.08.2018 11:52

26.07.2018 10:37