Как передать текст кнопки в модальное окно Vue?

Question

[anton_trofimov95]

Всем привет! код

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

Answer 1

[Александр Дроздов]

Документацию хотя бы прочитал)
https://ru.vuejs.org/v2/guide/components-props.html

Comments

[anton_trofimov95]

Александр Дроздов Читал) там же их мы приписываем к компоненту, а не кнопке

[Андрей Пике]

Ну, родителю вверх толкать через $emit.
Но для этого надо, чтобы значение у кнопки не было захардкожено, а быть переменной.
Переменная используется при отрисовке кнопки при $emit.

[anton_trofimov95]

Андрей Пике, не напишите пример, как в данном случае поступить? Просто то ли мозг к вечеру взрывается, то ли что... Я когда компоненту modal в html разметке пропсы указывал, то работало. Но надо же как-то кнопкам этим пропсы передать, а они вне компонента

[Андрей Пике]

Очень зависит от структуры проекта, поэтому нет одного правильного решения.
1. Если кнопка - компонент списка, то при клике на кнопку эмиттить название родителю, который будет это ловить и отображать в попапе. Но только на один уровень выше.
2. Если попап - отдельный компонент и далеко, то только через Vuex, или что-то подобное, шину событий.

[Андрей Пике]

Второй вариант лучше, т.к. не привязывается к иерархии компонентов.
Рекомендую ознакомится, т.к. в сложных проектах без этого никак.

Просто то ли мозг к вечеру взрывается

Это нормально. Просто привыкнуть надо.

[anton_trofimov95]

Андрей Пике в данном лайтовом проекте как сделать?) Код которого в кодпене прикрепил)

[Андрей Пике]

Слева в блоке HTML:

<button class="button" @click="showPopup">Оставить заявку</button>
<button class="button" @click="showPopup">Заказать звонок</button>

Справа в блоке JS:

showPopup() {
  let eventText = event.target.innerText;
  alert('Event text = ' + eventText);
  this.txt = `Оч Хотца ${eventText}!`;
  alert('Modal text = ' + this.txt);
  this.showModal = true
},

Без Vanilla JS тут ни как.

[anton_trofimov95]

Андрей Пике cпасибо

Answer 2

[coderisimo]

Например вот так.

Comments

[anton_trofimov95]

Да уж, так просто)

[coderisimo]

anton_trofimov95, есть много вариантов . Но раз у вас текст в слоте, то можно и так )
Я ,например, писал метод в самом компоненте и когда вызывал этот метод - передавал текст и тип (ошибка, сообщение, предупреждение) в этот метод. Таким образом вся логика диалога и данные его же - были только в нем. Он сам формировал стиль и текст на основании переденных ему данных. Основное-же приложение ничего об этой логике не знало (у него своих забот не мало, и не стоит перегружать его чужой логикой). У вас же приложение управляет видимостью диалога и его содержимым.

[anton_trofimov95]

coderisimo, вы имеете ввиду слот убрать? Или как перенести логику вызова компонента в компонент окна? Там вроде же больше никак. Или вы имеете ввиду, метод перенести наверх в компонент, а в главном приложении стереть? Как это должно в идеале выглядеть?

Отмечу, только еще бы понять, как через props делать, этот вариант вроде как захардкоженный

[coderisimo]

anton_trofimov95, через пропс делать просто. нужно просто залезть в доку)).
Лично я бы сделал метод диалога и в этот метод просто передавал бы нужный текст. Как .я и писал ранее - тем, кто использует ваш компонент не нужно знать его внутреннюю логику. Метод компонента можно вызывать через $refs. Вот и еще один повод залезть в доку ))))

[anton_trofimov95]

coderisimo если будет время, накатайте плиз пару строчек) а так, методы выше тоже рабочие и с помощью них я реализовал)

[coderisimo]

anton_trofimov95,
там нечего писать ) все уже написано.
добавьте в компонент свои данные (только как ф-цию)
добавьте в компонент свои методы - например метод show(text),
добавьте в шаблон компонента вывод текста
когда добавляете компонент в разметку родителя используйте ref для получения ссылки на него, например, ref='Dialog'
в родителе вызывайте метод компонента как this.$refs.Dialog.show('Hello!');
и
ЧИТАЙТЕ ДОКУМЕНТАЦИЮ