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

user_16636060 0
Viewed 119

When the user clicks on an svg element it should trigger a method which is defined in the vue method section but that's not working. It's throwing me the error: "Uncaught TypeError: this.renderData is not a function at SVGForeignObjectElement.eval"

My code:

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

}}```
d3.js vue.js
1 Answers

It's because this is within the scope of function ({id}) { ... }. If you want to call renderChart(), store the this referring to the vue instance before your statement.

Try:

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

}}```
user_141701110
Related