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

Question

[Vlad Osadchyi]

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

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

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

Как видите кнопка не вызывает метод testClick.

Comments

[Vlad Osadchyi]

пример решения: https://codesandbox.io/s/pedantic-mopsa-t47sc?file...

Answer 1

[0xD34F]

Чтобы выполнялись привязки обработчиков событий, атрибутов и т.д., вместо засовывания строки в 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') {
      // убедились, что клик был по кнопке - теперь делайте чего там вам надо
    }
  },
  ...

Comments

[Vlad Osadchyi]

Огромное спасибо!)

вместо кнопок вешайте обработчик клика куда-нибудь повыше

- не вариант потому, что в одном сообщении может быть несколько обращений через @

[0xD34F]

Vlad Osadchyi, вариант. Вы подумайте.

[Vlad Osadchyi]

0xD34F, https://i.imgur.com/s7FqxAf.png - это изначально было в ответе?) я просто только заметил.

[Vlad Osadchyi]

0xD34F, да, Вы правы, можно повесить обработчик и повыше, спасибо

[0xD34F]

Vlad Osadchyi, было.