Utilizing Vue and Prismic rich text: incorporating an event listener onto a span element

Question

Utilizing Vue and Prismic rich text: incorporating an event listener onto a span element

In my Vue app, I am retrieving content from Prismic using an API CMS. Within this content, there are certain sections enclosed in span tags with a unique class. My goal is to target those specific span nodes in Vue and apply an event listener to them.

When attempting to accomplish this task with vanilla JavaScript, the following code would suffice:

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

However, when implementing this code in Vue, it appears to only work momentarily before Vue refreshes the DOM. Experimenting with various hooks such as mounted, beforeupdate, updated, and ready did not yield successful results.

Update: After some time, I discovered that by utilizing the HTMLSerializer, I can insert HTML code into the span tags. Nonetheless, this method only allows for standard HTML insertion and does not grant access to Vue methods.

javascript vue.js virtual-dom

Answer 1

Answer №1

@Bruja I found a solution using a closure after getting some help from the team at Prismic.

It's worth noting, as mentioned by Phil Snow in the comment above, that if you're working with Nuxt, you might need to resort to traditional JavaScript instead of relying on Vue's functionality.

Take a look at this example where you can pass component-level props, data, methods, and more to the prismic htmlSerializer:

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

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) {
        // For additional elements and customizations, refer to:
        // 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 maintain default behavior for everything else
        return null;
      };
    },

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

Answer 2

@Bruja I found a solution using a closure after getting some help from the team at Prismic.

It's worth noting, as mentioned by Phil Snow in the comment above, that if you're working with Nuxt, you might need to resort to traditional JavaScript instead of relying on Vue's functionality.

Take a look at this example where you can pass component-level props, data, methods, and more to the prismic htmlSerializer:

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

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) {
        // For additional elements and customizations, refer to:
        // 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 maintain default behavior for everything else
        return null;
      };
    },

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

Answer 3

Answer №2

It seems like you're heading in the right direction by exploring the HTML Serializer. To ensure that all .specialClass <span> elements trigger a click event calling specialmethod(), you can implement the following:

import prismicDOM from 'prismic-dom';

const Elements = prismicDOM.RichText.Elements;

export default function (type, element, content, children) {
  // Check if the element classname is "specialClass"
  if (type === Elements.span && element.className === "specialClass") {
    return `<span @click="specialMethod">${content}</span>`;
  }

  // Return null for default behavior
  return null;
};

Answer 4

It seems like you're heading in the right direction by exploring the HTML Serializer. To ensure that all .specialClass <span> elements trigger a click event calling specialmethod(), you can implement the following:

import prismicDOM from 'prismic-dom';

const Elements = prismicDOM.RichText.Elements;

export default function (type, element, content, children) {
  // Check if the element classname is "specialClass"
  if (type === Elements.span && element.className === "specialClass") {
    return `<span @click="specialMethod">${content}</span>`;
  }

  // Return null for default behavior
  return null;
};

Utilizing Vue and Prismic rich text: incorporating an event listener onto a span element

Answer №1

Answer №2

Similar questions

ag grid - issue with icons not appearing correctly

What are the best practices for effectively utilizing the nodejs Stream API?

Utilizing a JavaScript function to toggle the Bootstrap dropdown without the need for manual clicking

Is there a way to prevent the URL of my Next.js app from constantly changing?

Fusion of Laravel and Vue component

Steps to open specifically the WhatsApp application upon clicking a hyperlink, image, or button

What is the connection between tsconfig.json and typings.json files?

Troubleshooting Angular: Unidentified property 'clear' error in testing

When attempting to access http://localhost:3000/highLightTitle.png using Next.js, a 404 error (Not Found) was encountered in the content

Unable to access Session state in Web Service through ajax on the client side

How can I design a versatile button in HTML/CSS3/jQuery/Javascript that utilizes images for borders and corners for maximum scalability?

Issue with fading out in Ajax.BeginForm not resolving

Google Maps integrated AWS server

How can I navigate through a webpage using Selenium WebDriver and JavaScript?

The suspense fallback function seems to be missing in NextJS 13

Divergence in results: discrepancy found in the outputs of nodejs crypto module and tweetnacl.js

Automatically logging in to a website using an AngularJS form

What is the process for sending a request to a static resource along with parameters?

Performing an AJAX request from a subfolder

What are the common issues with Angular 2's ng-if directive?