如何从回调函数内部寻址Vue.js组件中的方法

Question

我只是不明白为什么我不能从回调函数内部处理方法"virtDia"(第64行和第70行(。

[Vue warn]：安装的钩子中出错："TypeError:this.virtDia不是函数"在中找到

--->位于resources/assets/js/contensions/VegBedEditor.vue

TypeError："this.virtDia不是函数">

<script>

// vorlage: https://dev.to/ignoreintuition/binding-data-to-charts-using-vue-components-and-d3-4i27
import * as d3 from 'd3';

export default {
props: ['data','vegbed'], 
data: function () {
return {
}
},
computed: {
displaywidth: function() { return 600; },
displayheight: function() { return this.displaywidth*(this.vegbed.length/this.vegbed.width); },
margin: function() { return {top: 0, right: 0, bottom: 0, left: 0}; }
},
methods: {
initalizeChart: function () {
this.drawGardenBox();
},
virtDia: function (realDia) {
return (this.displaywidth/this.vegbed.width)*realDia;
},
drawGardenBox: function () {
this.gardenbox = d3.select('#vegbedcontainer').append('svg')
.attr("width", this.displaywidth + this.margin.left + this.margin.right)
.attr("height", this.displayheight + this.margin.top + this.margin.bottom)
// hintergrund für deselect zeichen
var bg = this.gardenbox.append("g")
.on("click", mouseclick); // unselect on background click
bg.append("rect") 
.attr('class', 'bg')
.attr("x", this.margin.left)
.attr("y", this.margin.top)
.attr("width", this.displaywidth + this.margin.left + this.margin.right)
.attr("height", this.displayheight + this.margin.top + this.margin.bottom)
function mouseclick(d) {
d3.selectAll(".selected").raise().classed("selected",false);     
}         
},
refreshBed: function () {
var gplant = this.gardenbox.selectAll("g")
.data(this.data).enter().append("g")
.attr("id", function(d){ return d.id; })
.attr("transform", function(d){ return "translate("+d.x+","+d.y+")" })
.on("click", mouseclick)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))

//                function virtDia(realDia) {
//                    return (this.displaywidth/this.vegbed.width)*realDia;
//                }
gplant.append("circle") // max size
.attr('class', 'plant')
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return this.virtDia(d.plant.adult_diameter); });
gplant.append("circle") // min size
.attr('class', 'plant')
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return this.virtDia(d.plant.exposure_diameter); });
gplant.append("image")
.attr('class', 'plant')
.attr("xlink:href", function(d) { return d.picref; })
.attr("x", function(d) { return d.x-(d.picsize/2); })
.attr("y", function(d) { return d.y-(d.picsize/2); })
.attr("width", function(d) { return d.picsize; })
.attr("height", function(d) { return d.picsize; });
function mouseclick(d) {
d3.selectAll(".selected").raise().classed("selected",false);
d3.select(this).selectAll(".plant").raise().classed("selected", true);
d3.selectAll("#"+this.id).classed("selected", true);      
}
function dragstarted(d) {
d3.selectAll(".selected").raise().classed("selected",false);
d3.select(this).selectAll(".plant").raise().classed("selected", true);
d3.selectAll("#"+this.id).classed("selected", true);
d3.event.sourceEvent.stopPropagation();
}
function dragged(d) {
d3.select(this).attr("transform","translate("+(d.x = d3.event.x)+","+(d.y = d3.event.y)+")");
}
function dragended(d) {
//d3.select(this).classed("active", false);
}
}
},
// lifecycle events
mounted: function () { // <-- lifecycle events
console.log('VegBedEditor mounted.')
this.initalizeChart();
this.refreshBed();
},
// watch functions
watch: { // <-- watch functions
'data': {
handler: function (val) {
this.refreshBed();
},
deep: true
}
},
template: `<div id="vegbedcontainer"><!-- SVG goes here --></div>`
}
</script>

Answer 1

将this分配给像vm这样的全局变量，并在回调中调用它：

let vm=this;//<---
gplant.append("circle") // max size
.attr('class', 'plant')
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return vm.virtDia(d.plant.adult_diameter); 
});
gplant.append("circle") // min size
.attr('class', 'plant')
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return vm.virtDia(d.plant.exposure_diameter); });