无法调用 vuejs 组件的方法答案

【问题标题】：couldn't call the vuejs component's method无法调用 vuejs 组件的方法
【发布时间】：2016-10-17 03:20:32
【问题描述】：

 var graph = Vue.component('graph', {
          模板：'#graph-template',
          道具： {
            数据：数组，
          },
          附：函数（）{
            this.genGraph();

          },
          方法：{
            生成图：函数（）{
              this.data.forEach（函数（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() 方法时，出现错误：

未捕获的 TypeError：this.updateGraph 不是函数。

【问题讨论】：

toggleGraph函数的定义在哪里？
我认为我们需要查看updateGraph 的正文，以了解this.toggleGraph 的调用位置和方式
你是在使用 vanilla JS 还是在使用 browserify 或 webpack 之类的东西来编译你的代码？

标签： javascript vue.js

【解决方案1】：

您遇到此问题的原因（基于您上面的代码）是因为this.updateGraph(root); 与您的组件不在同一范围内。

在this.data.forEach(function(obj) { 行上方添加以下内容：

var self = this;

然后改变：

this.updateGraph(root);

到：

self.updateGraph(root);

希望这会有所帮助！

【讨论】：