Is there a way to access the information stored within the export default in my Vue component's JavaScript file? Specifically, I am trying to retrieve the contents of the routes array within the calculateAndDisplayRoute() function.
overview.js
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var origin, dest;
for (var route in this.routes /*<--HERE*/) {
console.log('www')
if(route.id == this.filter){
console.log('true')
}
}
directionsService.route({
origin: 'Vancouver',
destination: 'Chicago',
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
export default {
name: 'fleet-overview',
data () {
return {
view: '',
routes: [], //<--HERE
users: [],
errorRoute: '',
response: [],
filter: 'searchby',
searchTerm: '',
users: [],
}
},
created: function () {
this.routeView();
},
methods: {
initMap: function(){
this.$nextTick(function(){
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 45.49, lng: -73.61},
zoom: 9
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('filterselect').addEventListener('change', onChangeHandler);
})
}
//...
}