渲染数据中的vue组件

Question

我试图为apexcharts制作自定义工具提示，例如：https://apexcharts.com/docs/options/tooltip/#

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

它是有效的，但当我设置一些vue组件作为回报时，什么都没有显示。

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

<template>
<div>Just simple component</div>
</template>
<script>
export default { name: "MyComponent" }
</script>

为什么会发生这种情况，以及如何解决？

Answer 1

要使Vue正确渲染组件，您必须在自定义工具提示函数中告诉它：

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

如果您需要数据或其他反应，它会变得有点复杂，请参阅https://v2.vuejs.org/v2/api/#Vue-扩展以获取更多信息。