Как динамически отображать шаблоны VueJS внутри пользовательского элемента

Question

Я использую Vue для создания приложения с помощью Esri's Mapping API.

С помощью Esri API я могу установить содержимое всплывающего шаблона, используя объект:

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

и функция

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

Однако мне бы хотелось, чтобы функция getTemplate возвращала компонент Vue, отображаемый в innerHTML, вместо жестко закодированного html.

У меня есть компонент:

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

и подозреваю, что он как-то связан с функциями рендеринга компонентов, но не может понять, как вставить компонент в функцию getContent.

Answer 1

Предполагая, что API, с которым вы интегрируетесь, ожидает, что getContent метод возвратит элемент DOM, вы можете попробовать:

• создать экземпляр компонента
• сделать его вне документа (вызвав $ mount без аргументов в экземпляре компонента)
• возвращает элемент DOM, для которого был визуализирован компонент

Для реализации описанного выше getContent метод может выглядеть следующим образом:

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