在数据中渲染 vue 组件

Question

I trying to make custom tooltip for apexcharts like in example: https://apexcharts.com/docs/options/tooltip/#

tooltip: {
  custom: function({series, seriesIndex, dataPointIndex, w}) {
    return '<div class="arrow_box">' +
      '<span>' + series[seriesIndex][dataPointIndex] + '</span>' +
      '</div>'
  }
}

and it's works, but when I set in return some vue component nothing shows.

tooltip: {
  custom: function({series, seriesIndex, dataPointIndex, w}) {
    return '<MyComponent/>'
  }
}

<template>
   <div>Just simple component</div>
</template>

<script>
export default { name: "MyComponent" }
</script>

Why is this happening and how to fix it?

Answer 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.