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

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 事件

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

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

Answer 1

替换.attr(":v-on:click", "showHistChart");为.on("click", this.showHistChart);wherethis.showHistChart代表 vue 实例中的方法。