Vue.js

#vue.js #d3.js

Вопрос:

Когда пользователь нажимает на элемент 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

}}```
 

Ответ №1:

Это потому this , что находится в рамках function ({id}) { ... } . Если вы хотите вызвать функцию renderChart(), сохраните this ссылку на экземпляр vue перед вашим заявлением.

Попробуй:

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

}}```
 

Комментарии:

1. Это потрясающе!! Большое вам спасибо! Я знал, что это как-то связано с областью видимости, но я не знал, как это исправить :)!