Vue.js & D3.js - 尝试在用户单击 svg 元素时调用 Vue 方法，但会引发错误

Question

当用户点击一个 svg 元素时，它应该触发一个在 vue 方法部分定义的方法，但它不起作用。它向我抛出错误： “未捕获的类型错误：this.renderData 不是 SVGForeignObjectElement.eval 处的函数”

我的代码：

renderData(data){
   //some other code

    svg.selectAll('.delete-icon')
    .on('click', function ({id}) {
        links = removeLinksRelations(links, id);
        nodes = nodes.filter(node => id !== node.id);
        **this.renderData({ links, nodes });**  // <--- THIS DOESN'T WORK

}}```

Answer 1

因为this在function ({id}) { ... }的范围内。如果你想调用 renderChart()，在你的语句之前存储引用 vue 实例的 this。

尝试：

renderData(data){
   const vueInstance = this
   //some other code

    svg.selectAll('.delete-icon')
    .on('click', function ({id}) {
        links = removeLinksRelations(links, id);
        nodes = nodes.filter(node => id !== node.id);
        **vueInstance.renderData({ links, nodes });**

}}```

Vue.js & D3.js - 尝试在用户单击 svg 元素时调用 Vue 方法，但会引发错误

Vue.js & D3.js - Trying to call a Vue method when user clicks on svg element, but it's throwing an error

d3.js

vue.js