Javascript Vue和Prismic富文本：将事件侦听器添加到span节点

我的Vue应用程序的内容是从Prismic（API CMS）获取的。我有一个富文本块，其中的一些部分被包装在带有特定类的span标记中。我想用Vue获取这些跨节点，并为它们添加一个事件侦听器

对于JS，这段代码可以工作：

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

但是当我在Vue中使用这段代码时，我可以看到它在Vue更新DOM之前只工作了几分之一秒。我已经尝试在挂载、更新前、更新后、就绪挂钩上使用此代码。。。什么都没起作用

---

更新：几个小时后，我发现使用可以将HTML代码添加到span标记中。但这是常规的HTML，我无法访问Vue方法。

我相信您查看HTML序列化程序的方法是正确的。如果希望所有

.specialClass

元素触发调用

specialmethod（）

的单击事件，这应该适用于您：

从“prismic dom”导入prismicDOM；
const Elements=prismidom.RichText.Elements；
导出默认函数（类型、元素、内容、子项）{
//我不能100%确定element.className是否正确，如果不正确，请使用devTools进行调查
if（type==Elements.span&&element.className===“specialClass”）{
返回`${content}`；
}
//返回null以保持其他所有内容的默认行为
返回null；
};
@Bruja
我能够通过闭包找到解决方案。普里斯米克的人提醒/指给我看

值得注意的是，根据上面Phil Snow的评论：如果您使用Nuxt，您将无法访问Vue的功能，必须使用老式JS

下面是一个示例，您可以在其中传递组件级的道具、数据、方法等。。。到prismic htmlSerializer：

<template>
  <div>
    <prismic-rich-text
      :field="data"
      :htmlSerializer="anotherHtmlSerializer((startNumber = list.start_number))"
    />
  </div>
</template>



从“prismic dom”导入prismicDOM；
导出默认值{
方法：{
另一个HTMLSerializer（起始编号=1）{
const Elements=prismidom.RichText.Elements；
常数=this；
返回函数（类型、元素、内容、子项）{
//要添加更多元素和自定义项，请将其用作参考：
// https://prismic.io/docs/vuejs/beyond-the-api/html-serializer
testMethod（startNumber）；
开关（类型）{
case Elements.oList：
返回`${children.join（''）}`；
}
//返回null以保持其他所有内容的默认行为
返回null；
};
},
testMethod（startNumber）{
log（“此处的测试方法”）；
控制台日志（startNumber）；
}
}
};
谢谢，@Johan，但恐怕不行。
@click=“specialMethod”
附加到span标记，但它不作为Vue代码工作，因此不会触发Vue方法：（你试过了吗？为什么不起作用？它只是为要渲染的
prismic rich text
组件生成了一个模板。prismic文档中的
示例与prismic文档有什么不同？好的一点，如果路由器链接起作用，你的建议也应该起作用。但我试过了，
@click=method
实际上在sp内部当我在DOM检查器中查找它时，会出现一个错误，但当我单击它时，它不会触发Vue方法直接进入Vue组件，它确实可以工作。但是如果我在DOM检查器中查找它，
@click=method
不可见。因此序列化程序和Vue对DOM的操作似乎不同。正如Johan所说，您应该能够在此处添加Vue语法，因为Vue运行时编译器会检查模板。除非您使用nuxt没有访问vue运行时编译器的权限。你找到解决方案了吗？我正在处理同一个问题。我发现：1.零vue功能有效，因为新渲染的元素似乎是在vue完成渲染后渲染的。2.将另一个htmlSerializer装入或类似的东西，在vue中不起作用这是因为Prismic的render再次出现问题。嗨，Tom。不，我无法使用HTML序列化程序附加Vue方法，只使用普通HTML。正如您在下面的评论中所看到的，解决方案@Johan Baajil propose应该可以工作。但我尝试了，但没有。我不知道我做错了什么。因此，我找到了一个解决我的问题的方法，只使用普通HTML和CSS。
import prismicDOM from 'prismic-dom';

export default {
  methods: {
    anotherHtmlSerializer(startNumber = 1) {
      const Elements = prismicDOM.RichText.Elements;
      const that = this;

      return function(type, element, content, children) {
        // To add more elements and customizations use this as a reference:
        // https://prismic.io/docs/vuejs/beyond-the-api/html-serializer

        that.testMethod(startNumber);

        switch (type) {
          case Elements.oList:
            return `<ol start=${startNumber}>${children.join('')}</ol>`;
        }

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

    testMethod(startNumber) {
      console.log('test method here');
      console.log(startNumber);
    }
  }
};