在数据中渲染 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>'
  }
}

它可以工作，但是当我在 return 中设置时，一些 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://vuejs.org/v2/api/#Vue-extend 了解更多信息。

在数据中渲染 vue 组件

Render vue component in data

javascript

dom

vue.js

apexcharts