Exploring Techniques to Control the DOM Using VUE Attributes and Variables

Question

Exploring Techniques to Control the DOM Using VUE Attributes and Variables

I am working on a simple component that displays an HTML string:

<template>
  <v-list-item-content v-html="html_string">
</template>

<script>
  export default {
    name: "HtmlRenderer",
    props: ['html_string']
</script>

The HTML content is fetched from an API in the parent component and may include basic HTML elements such as <p> and <blockquote>.

I want to manipulate the DOM of this HTML string by performing the following actions:

Locate each <blockquote> tag and insert a button before it (there could be zero or more instances)
Create a button that toggles the .active class for the corresponding <blockquote>

How can I achieve these steps within the lifecycle of a VUE component? Is it possible to call a function defined in the methods section of the component from the injected <button>?

Any insights or suggestions would be greatly appreciated.

javascript vue.js

Answer 1

Answer №1

Here are some suggestions to tackle this challenge:

Instead of directly updating the html string before parsing, consider manipulating the DOM using vanilla JS after the component is mounted.
Utilize Vue's render function within your component to customize its rendering process.
While the render function approach may be powerful, it can also be quite complex and challenging.

In order to proceed, you could follow these steps:

Take on the task of parsing the html string yourself to break it down into individual html tags.
Iterate through each tag and use the render function to display it accordingly.
For instances where you encounter a blockquote, incorporate the necessary button element.


interface HTMLTag {
   name: string,
   attributes: any[],
   childrens: HTMLTag[],
}

render (h: CreateElement) {
    const parsedElements: HTMLTag[] = parseToHTMLTag(this['html_string'])
    
    parsedElements.forEach((tag) => {
       if (tag.name === 'blockquote') {
           renderButton()
       }

       renderTag(tag)
    })

    renderTag = (htmlTag: HTMLTag) => {
       return h(tag.name, {
          attrs: tag.attributes,
          childrens: render(tag.childrens)
       })
    }

    renderButton = () => {
       return h('button', { ... })
    }

}

This concept can be implemented with effort and determination. However, be prepared for a substantial amount of work ahead. Best of luck!

Answer 2

Here are some suggestions to tackle this challenge:

Instead of directly updating the html string before parsing, consider manipulating the DOM using vanilla JS after the component is mounted.
Utilize Vue's render function within your component to customize its rendering process.
While the render function approach may be powerful, it can also be quite complex and challenging.

In order to proceed, you could follow these steps:

Take on the task of parsing the html string yourself to break it down into individual html tags.
Iterate through each tag and use the render function to display it accordingly.
For instances where you encounter a blockquote, incorporate the necessary button element.


interface HTMLTag {
   name: string,
   attributes: any[],
   childrens: HTMLTag[],
}

render (h: CreateElement) {
    const parsedElements: HTMLTag[] = parseToHTMLTag(this['html_string'])
    
    parsedElements.forEach((tag) => {
       if (tag.name === 'blockquote') {
           renderButton()
       }

       renderTag(tag)
    })

    renderTag = (htmlTag: HTMLTag) => {
       return h(tag.name, {
          attrs: tag.attributes,
          childrens: render(tag.childrens)
       })
    }

    renderButton = () => {
       return h('button', { ... })
    }

}

This concept can be implemented with effort and determination. However, be prepared for a substantial amount of work ahead. Best of luck!

Exploring Techniques to Control the DOM Using VUE Attributes and Variables

Answer №1

Similar questions

What strategies can I use to reduce duplication in my HTML and JavaScript code?

Using jQuery to target adjacent elements excluding those that are separated by other text

Using 2 parameters, ExternalInterface.addCallback

Adjusting the bottom property to a negative value in CSS will stretch the page downwards

Show variable outside callback function - Ionic2

Creating an object in javascript with two arrays: a step-by-step guide

The jQuery selector threw an Uncaught SyntaxError due to an Unexpected identifier

How can I preserve the file extension of an ejs file as .html?

Creating nested routes in react-router is a useful technique for managing complex applications. By

Tips for replacing default arrow icons with 'Previous' and 'Next' buttons in a Material-UI pagination element

Web audio: setTimeout slows down when mobile screen is turned off

Exploring Chrome's WebUSB Functionality with AngularJS

tips on assigning a unique ID to an item in a firebase database collection

Objects within an array are not sorted based on their properties

Issue with server-side rendering due to importing routes

What is the process for conducting a comprehensive match search using dual parameters?

"Is there a specific way to designate the content type as multipart form data when using Axios

Changing the text of a link when hovering - with a transition

The attribute on the label fails to trigger any action on the linked input upon clicking, due to the binding of the id and for

Developing a HTML button through Javascript that triggers a method with a single parameter when clicked