Vue.js方法不触发

Question

When i call a vuejs function from jquery selector it is not firing. I have integrate d3-dagre chart in vue component. when i set a click action for the nodes it is not firing the vuejs methods. In the below getJobid() is not firing. Find the below vue component code and also error in the end.

Vue component:

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')
    }
  }
}

Error:

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

The this in the callback for the on handler is not referencing the Vue instance. Set a reference outside the handler and use that instead:

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()
  })

Answer 2

最好使用箭头函数，以便回调函数中的this引用Vue实例。

Answer 3

Well, the problem here is that "this.getJobid()" actually is not a function This is referring to the current context - in your case

inner.selectAll("g.node").on("click", function(v) {
// as we are inside inner.selectAll('g.node') 
// our Vue instance is not what we will find here
..
}

The solution is to create a reference to the Vue before the registering of your handler, typically

const vm = this;

Then you can try

vm.getJobid();

Answer 4

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