不能调用vuejs组件的方法

Question

 var graph = Vue.component('graph', { 
      template: '#graph-template', 
      props: { 
      data:Array, 
      }, 
      attached: function(){ 
      this.genGraph();
 
      }, 
      methods:{ 
      genGraph:function(){ 
       this.data.forEach(function(obj) {
 

  root = obj; 
      root.x0 = h/2; 
      root.y0 = 0; 

      this.updateGraph(root); 
      }) 
     }, 
     updateGraph: function(source) { 

       var i = 0; 
       var duration = d3.event && d3.event.altKey ? 5000 : 500; 


       var nodes = this._tree.nodes(root).reverse(); 


       nodes.forEach(function(d) { d.y = d.depth * 180; }); 


       var node = this._svg.selectAll("g.node") 
        .data(nodes, function(d) { 
        return d.id || (d.id = ++i); 
        }); 

       var nodeEnter = node.enter().append("svg:g") 
        .attr("class", "node") 
        .attr("transform", function(d) { 
        return "translate(" + source.y0 + "," + source.x0 + ")"; 
        }) 
        .on("click", function(d) { 
        this.updateGraph(d); 
        });   

       nodeEnter.append("svg:circle") 
        .attr("r", 0) 
        .style("fill", function(d) { 
        return d._children ? "lightsteelblue" : "#fff"; 
        }); 

       nodeEnter.append('svg:foreignObject') 
       .attr("x", -3) 
       .attr("y", -15) 
       .append("xhtml:body") 
       .html(function(d){ 
       return d.children || d._children ? "<i class='fa fa-server fa-2x' style='color:#e29e3d;'></i>" : "<i class='fa fa-server fa-2x' style='color:#03a9f4;'></i>"; 
       }); 
       nodeEnter.append("svg:text") 
        .attr("x", function(d) { return d.children || d._children ? - 15 : 25; }) 

        .attr("dy", ".35em") 
        .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 
        .text(function(d) { return d.name; }) 
        .style("fill-opacity", 1e-6); 

       nodeEnter.append("a") 
        .attr("xlink:href", function (d) { 
        return "/" + d.id; 
        }) 
        .append("rect") 
        .attr("class", "clickable") 
        .attr("y", -10) 
        .attr("x", function (d) { return d.children || d._children ? -70 : 10; }) 
        .attr("width", 60) 
        .attr("height", 16) 
        .style("fill","rgba(3,169,244,0)") 
        .style("fill-opacity", .3);  

       var nodeUpdate = node.transition() 
        .duration(duration) 
        .attr("transform", function(d) { 
        return "translate(" + d.y + "," + d.x + ")"; 
        }); 

       nodeUpdate.select("circle") 
        .attr("r", 0) 
        .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 

       nodeUpdate.select("text") 
        .style("fill-opacity", 1) 
        .text(function(d){ 
        return d.name.split("/").pop(); 
        }); 

       var nodeExit = node.exit().transition() 
        .duration(duration) 
        .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) 
        .remove(); 

       nodeExit.select("circle") 
        .attr("r", 1e-6); 

       nodeExit.select("text") 
        .style("fill-opacity", 1e-6); 

       var link = this._svg.selectAll("path.link") 
        .data(this._tree.links(nodes), function(d) { return d.target.id; }); 

       link.enter().insert("svg:path", "g") 

        .attr("class", function (d) { return (d.source != root) ? "link_dashed" : "link_continuous" ; }) 
        .attr("d", function(d) { 
        var o = {x: source.x0, y: source.y0}; 
        return diagonal({source: o, target: o}); 
        }) 
       .transition() 
        .duration(duration) 
        .attr("d", diagonal) 
        .attr("marker-end", "url(#end)"); 

       link.transition() 
        .duration(duration) 
        .attr("d", diagonal) 
        .attr("marker-end", "url(#end)"); 

       link.exit().transition() 
        .duration(duration) 
        .attr("d", function(d) { 
        var o = {x: source.x, y: source.y}; 
        return diagonal({source: o, target: o}); 
        }) 
        .remove(); 

       nodes.forEach(function(d) { 
       d.x0 = d.x; 
       d.y0 = d.y; 
       }); 
      } 

     } 
} 
 

当updateGraph（）方法被调用时，发生错误：

未捕获的类型错误：this.updateGraph不是一个函数。

Answer 1

你会得到这个问题的原因（根据你的代码）是因为this.updateGraph(root);与你的组件不在同一个范围内。

以上线路this.data.forEach(function(obj) {添加以下内容：

var self = this;

，然后改变：

this.updateGraph(root); 

到：

self.updateGraph(root); 

希望这有助于！