javascript - 如何在 D3 附加的 vue.js 对象上启用 v-on 事件

Question

我正在使用 c3 构建一个图表，然后使用 d3 在此图表顶部添加一个 div:

请参阅 jsfiddle 上的工作示例.

var naviChart = d3
  .selectAll("#chart")
  .append("div")
  .attr("class", "hist-future-btn");
naviChart
  .append("div")
  .text("Hist")
  .attr("class", "hist")
  .attr(":v-on:click", "showHistChart");

即使代码已正确生成(通过 Chrome 检查器检查):

<div class="hist" @click="showHistChart">Hist</div> 

未调用函数showHistChart。 我将上面的行从 Chrome 检查器复制粘贴到 HTML 代码的底部，然后它就可以工作了。所以我们知道 d3 正确生成了代码，但它没有启用 vue 事件

如何在 d3.js 动态添加的对象上启用 vue.js？

我找到了这个topic ，有非常相似的问题，但它只回答了在 svg 元素上启用事件的问题，并在评论中打开了我的问题。

Answer 1

将 .attr(":v-on:click", "showHistChart"); 替换为 .on("click", this.showHistChart); 其中 this.showHistChart 表示 vue 实例中的一个方法。