Guide to dynamically rendering VueJS templates within a custom element

Question

Guide to dynamically rendering VueJS templates within a custom element

Currently, my Vue application relies on Esri's Mapping API for functionality.

One feature provided by the Esri API allows me to define a popup template content using an object:

const popupWindowTemplate = {
    title: "{mag} magnitude near {place}",
    content: getContent
 };

and a function

getContent: function(){
      let node = document.createElement('div');
      node.innerHTML = "<button type='button'>Do my thing!</button>"
      return node;
}

However, I am looking to enhance this setup by making the getTemplate function return a Vue component rendered within the innerHTML instead of static HTML code.

I have created a Vue component:

 const buffer = Vue.component('do-mything', {
  template: '<div><button type="button" @click="domything">Do my thing!</button></div>',
  data() {
    return {
          somevalue: ''
        };
      }
});

I believe that this approach involves utilizing components render functions, but I have encountered difficulties in embedding the component within the getContent function.

javascript vue.js popup vue-component esri

Answer 1

Answer №1

When working with an API that expects the getContent method to return a DOM element, you can follow these steps:

Create a new component instance.
Render the component off-document by using the $mount method without any arguments.
Retrieve the DOM element where the component was rendered to.

To implement the getContent method as described above, it might look something like this:

getContent: function(){
  const vueComponent = new Vue({
    template: '<div><button type="button" @click="domything">Do my thing!</button></div>',
    methods: {
      domything() {
        console.log('Method was called')
      }
    }
  });
  return vueComponent.$mount().$el;
}

Answer 2

When working with an API that expects the getContent method to return a DOM element, you can follow these steps:

Create a new component instance.
Render the component off-document by using the $mount method without any arguments.
Retrieve the DOM element where the component was rendered to.

To implement the getContent method as described above, it might look something like this:

getContent: function(){
  const vueComponent = new Vue({
    template: '<div><button type="button" @click="domything">Do my thing!</button></div>',
    methods: {
      domything() {
        console.log('Method was called')
      }
    }
  });
  return vueComponent.$mount().$el;
}

Guide to dynamically rendering VueJS templates within a custom element

Answer №1

Similar questions

Illuminated Box with Text Beneath Image Overlay

Learn how to showcase real-time stock information from Yahoo Finance on an Android device. See the JSON format provided below for guidance

I am experiencing issues with the detection of mouseover events on an SVG circle

A comprehensive guide on extracting attachments and inline images from EML files and transforming them into HTML format

Difficulty implementing clickable dropdown buttons in a React navbar

javascript the unseen element becomes visible upon page loading

Simulation of N-bodies in three.js

The HTML must be loaded prior to the execution of my JavaScript function

Filtering a List Using Angular

Access the value of a JavaScript variable declared in one function within a separate function

Issue with capturing mouse position in canvas when hovering over <h1> element above it

Choose from the Angular enum options

Implementing Jquery to attach a click event immediately after adding a new row to the table, all

What is the best way to increment the stock number based on the quantity of items in the cart using Next.js

The powerful combination of Ajax and Django creates a dynamic Like button

Issue with receiving output from tessearct.js in PDF format

Can you demonstrate how to incorporate a new line within a for loop?

How can we use AJAX to incorporate a "like" feature?

Error: Attempting to access 'devolucionItems' property of undefined object which may be caused by usage of .map() method

Why does Node.js exclusively acknowledge absolute paths?