Задать вопрос
VladOsadchyi
@VladOsadchyi
Студент

Как вставить кнопки в v-html, чтобы при клике они вызывали метод компонента?

Делаю что-то типа мессенджера на vue2.
Нужно сделать такую такую фичу, чтобы обращение к пользователю (@vlad) в сообщении на выходе заменялись на кнопку, которая открывает модалку с профилем пользователя. По сути, как в телеграм.

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

Вот набросал пример: https://codesandbox.io/s/vibrant-sky-p399o?file=/s...

Как видите кнопка не вызывает метод testClick.
  • Вопрос задан
  • 263 просмотра
Подписаться 1 Средний 1 комментарий
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Чтобы выполнялись привязки обработчиков событий, атрибутов и т.д., вместо засовывания строки в v-html надо её компилировать как шаблон компонента, как-то так:

<component :is="getComponent(text)"></component>

methods: {
  getComponent(text) {
    return Object.assign(Vue.compile(`<div>${this.getMessageHtml(text)}</div>`), {
      methods: {
        // сюда пробрасываете нужный вам обработчик клика
      },
    });
  },
  ...

Хотя, в данном случае, это делать не обязательно, можно воспользоваться делегированием - вместо кнопок вешайте обработчик клика куда-нибудь повыше, например:

<div v-html="getMessageHtml(text)" @click="onClick"></div>

methods: {
  onClick(e) {
    if (e.target.tagName === 'BUTTON') {
      // убедились, что клик был по кнопке - теперь делайте чего там вам надо
    }
  },
  ...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы