[Vuejs]-Render vue component in data

by

1👍

✅

To make Vue render the component correctly, you’ll have to tell it to in the custom tooltip function:

tooltip: {
  custom: ({series, seriesIndex, dataPointIndex, w}) => {
    // create component constructor
    var TooltipComponent = Vue.extend({
      template: '<my-component/>'
    });
    // create an instance of tooltip and mount it
    var tooltip = new TooltipComponent();
    tooltip.$mount();
    // Return the html
    return tooltip.$el.outerHTML;
  }
}

If you need data or other reactivity it becomes a bit more complicated, see https://v2.vuejs.org/v2/api/#Vue-extend for more information.

Leave a comment