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

Posted 2023-02-22

【中文标题】如何引用 Vue 组件的 this 而不是 D3 的 this 实例

【英文标题】：How to refer to the Vue component's this instead of the D3 this instance

【发布时间】：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 吗？

我们是两个不同的人评论。如果您想专门称呼某人，请在其姓名前使用@。

【参考方案1】：

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

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