jquery - Vuejs 方法不触发

Question

当我从 jquery 选择器调用 vuejs 函数时，它没有触发。我在 vue 组件中集成了 d3-dagre 图表。当我为节点设置单击操作时，它不会触发 vuejs 方法。在下面的 getJobid() 中没有触发。找到下面的vue组件代码，最后也是报错。

Vue 组件:

export default {
  name: 'dagView',
  created () {
    console.log('test2')
  },
  mounted () {
     var g = new dagreD3.graphlib.Graph().setGraph({})
     // Create the renderer    
     var render = new dagreD3.render()

     // Set up an SVG group so that we can translate the final graph.
     var svg = d3.select("svg"),
     inner = svg.append("g")

     // Run the renderer. This is what draws the final graph.
     render(inner, g)

     inner.selectAll("g.node")
     .on("click", function(v) {
        console.log("Nodes --> "+ v + " -- "+ g.node(v).label)
        this.nodeId = g.node(v).label
        console.log("Node id -- "+ this.nodeId)
        this.getJobid()
     })
  },
  methods: {
    getJobid: function() {
      console.log('Received NodeId')
    }
  }
}

错误:

Uncaught TypeError: this.getJobid is not a function
at SVGGElement.eval (DAG.vue?2ccc:180)
at SVGGElement.__onclick (d3.v3.min.js:1)

Answer 1

on 处理程序的回调中的 this 没有引用 Vue 实例。在处理程序外部设置引用并改用它:

var self = this 
inner.selectAll("g.node")
  .on("click", function(v) {
    console.log("Nodes --> "+ v + " -- "+ g.node(v).label)
    self.nodeId = g.node(v).label
    console.log("Node id -- "+ this.nodeId)
    self.getJobid()
  })