Vue.js方法不觸發

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

Answer 2

最好使用箭頭函數，以便回調函數中的this引用Vue實例。

Answer 3

好吧，這里的問題是“ this.getJobid（）”實際上不是一個函數，這是指當前上下文-在您的情況下

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
..
}

解決方案是在注冊處理程序之前創建對Vue的引用，通常是

const vm = this;

那你可以試試

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