GeoJSON - Method within onEachFeature - vuejs2

Question

Vue2Leaflet is a library to implement Leaflet into the Vue2 Framework; with the ability to show GeoJSON objects on a map.
With multiple GeoJSON lines, I want to have a mouse click event that effects the style of other lines (e.g. it toggles a selectedLineId variable). I managed to change the style of geojson lines on mouse over itself; see this JSFiddle.
Core is the onEachFeature which adds the mouse over event to every feature. But I have no idea how to run a Vue method from here;
function onEachFeature (feature, layer) {
layer.on('mouseover', function (e) {
e.target.setStyle({
color: "#FF0000"
});
});
layer.on('mouseout', function (e) {
e.target.setStyle({
color: "#000000"
});
});
}

Answer 1

You could bind your onEachFeature function to your Vue object:
data() {
return {
// ...
lines: {
geojson: geojsondata,
options: {
onEachFeature: onEachFeature.bind(this),
style: {
color: "#000000"
}
}
}
}
}
this in onEachFeature will then reference your Vue object:
function onEachFeature (feature, layer) {
var v = this;
layer.on('mouseover', function (e) {
// assuming you have a getColor method defined
e.target.setStyle({
color: v.getColor()
});
});
layer.on('mouseout', function (e) {
e.target.setStyle({
color: "#000000"
});
});
}
Here's an updated Fiddle : https://jsfiddle.net/qywaz1h8/96/