How to render VueJS templates dynamically inside custom element

user_7613381 0
Viewed 1579

I'm using Vue to build an app with Esri's Mapping API.

Via the Esri API, I'm able to set 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 would like the getTemplate function to return a Vue component rendered in the innerHTML instead of hard coded html.

I have a component:

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

and suspect it has something to do with components render functions, but have been having trouble figuring out how to insert the component in the getContent function.

esri vue-component vue.js popup javascript
1 Answers

Assuming the that API, you integrate with, expects getContent method to return a DOM element, you can try to:

  • create a component instance
  • render it off-document (by calling $mount without args on the component instance)
  • return the DOM element the component was rendered to

To implement the above getContent method may look like as follows:

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;
}
user_108681920
Related