如何引用 Vue 组件的 this 而不是 D3 的 this 实例答案

【问题标题】：How to refer to the Vue component's this instead of the D3 this instance如何引用 Vue 组件的 this 而不是 D3 的 this 实例
【发布时间】：2020-01-17 03:26:38
【问题描述】：

我正在尝试更新 Vue 组件数据部分，以最终强制页面使用新数据更新组件。

当点击 D3 svg 元素时，Vue 组件应该会更新。

我可以从被点击的 D3 元素中获取事件，但是我无法引用 Vue 实例。

我尝试将函数拆分为更小的函数，以挂在 this 实例上，但无济于事。我是 d3 和 vue 的新手，但觉得混合 jquery 语法的方法不自然。

export default {
new:"example"
data() {
return {
  showModal : false
  message : null
},
methods: {
   showModalAndMessage(){
   $('d3element').click(function(message){
   this.showmodal = true;
   this.message = message;
   console.log(this)
}

但是，上面只是打印了 d3 这个实例，我怎样才能让它引用到 Vue 实例呢？

【问题讨论】：

你试过箭头函数吗？另外，不相关：这里不需要 jQuery，只需使用 D3 本身来获取元素。
你试过这个吗。$el
现在尝试使用箭头功能。你能扩展一下 $el 吗？
我们是两个不同的人评论。如果您想专门称呼某人，请在其姓名前使用@。

标签： vue.js d3.js this

【解决方案1】：

要访问 vue 实例，请使用箭头函数，如下所示：

export default {
new:"example"
data() {
return {
  showModal : false
  message : null
},
methods: {
   showModalAndMessage(){
   $('d3element').click( message => {
   this.showmodal = true;
   this.message = message;
})

【讨论】：