Vue и Prismi c форматированный текст: добавить прослушиватель событий в узел span

Question

Содержимое моего Vue приложения получено из Prismi c (API CMS). У меня есть расширенный текстовый блок, некоторые части которого заключены в теги span с указанным классом c. Я хочу получить эти узлы span с Vue и добавить к ним прослушиватель событий.

С JS, этот код будет работать:

var selectedSpanElements = document.querySelectorAll('.className');
selectedSpanElements[0].style.color = "red"

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

Обновление: Несколько часов спустя я обнаружил, что с помощью HTMLSerializer Я могу добавить HTML код к тегу span. Но это обычный HTML, я не могу получить доступ к Vue методам.

Answer 1

Полагаю, вы на правильном пути, просматривая сериализатор HTML. Если вы хотите, чтобы все ваши элементы .specialClass <span> вызывали событие щелчка, которое вызывает specialmethod(), это должно работать для вас:

import prismicDOM from 'prismic-dom';

const Elements = prismicDOM.RichText.Elements;

export default function (type, element, content, children) {
  // I'm not 100% sure if element.className is correct, investigate with your devTools if it doesn't work
  if (type === Elements.span && element.className === "specialClass") {
    return `<span @click="specialMethod">${content}</span>`;
  }

  // Return null to stick with the default behavior for everything else
  return null;
};