When working with Vue, I usually use the ref keyword to access components. However, I am struggling to understand how to access HTML tags from within a component.
I attempted:
<input type="text" ref="searchAddress" id="searchAddress" name="searchAddress" class="form-control" v-model="incidentForm.searchAddress">
and within the vue component:
var input = this.$refs.searchAddress;
This approach did not work for me, leading me to believe that it only works when referencing components. How can I access the input tag from within Vue?
I have created a class to manage all GoogleMaps API calls in my Vue files. Therefore, I am unsure of how to handle accessing the data of a specific input field without direct access. What would be the correct approach to avoid direct access like this?
The error message I am encountering is:
Uncaught TypeError: Cannot set property 'autocompletePlace' of undefinedthis.autocompletePlace = place is not functioning as expected.
methods: {
initMap: function initMap() {
this.initialLocation = this.createInitialLocation(48.184845, 11.252553);
this.mapSetup(this.$refs.map, this.initialLocation, function () {
this.initAutoCompleteListener(function (place) {
this.autocompletePlace = place;
});
}.bind(this));
}
}
GoogleMapsApi.js
export default {
data() {
return {
map: '',
currentIncidentLocation: '',
autocomplete: '',
searchMarker: ''
}
},
events: {
currentIncidentLocation: function(location) {
this.currentIncidentLocation = location;
}
},
methods: {
createInitialLocation: function(latitude, longitude) {
return new google.maps.LatLng(latitude, longitude);
},
mapSetup: function(selector, initialLocation, callback) {
this.map = new google.maps.Map(selector, {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
this.map.setCenter(initialLocation);
this.searchMarker = this.createMarker();
var input = document.getElementById('searchAddress');
this.autocomplete = new google.maps.places.Autocomplete(input);
callback();
},
initAutoCompleteListener: function(callback) {
this.autocomplete.addListener('place_changed', function() {
var place = this.autocomplete.getPlace();
if (!place.geometry) {
window.alert("The place could not be found");
return;
}
callback(place);
}.bind(this));
},
createMarker: function() {
var marker = new google.maps.Marker({
map: this.map
})
return marker;
}
}
}
GISView.vue
<template>
<div ref="map" id="map" class="google-map" style="height: 800px; position: relative; overflow: hidden;">
</div>
</template>
<script>
import GoogleMaps from '../mixins/GoogleMaps.js';
export default {
mixins: [GoogleMaps],
data() {
return {
initialLocation: '',
autocompletePlace: ''
}
},
mounted() {
this.$events.$on("MapsAPILoaded", eventData => this.initMap());
},
methods: {
initMap: function() {
this.initialLocation = this.createInitialLocation(48.184845, 11.252553);
this.mapSetup(this.$refs.map, this.initialLocation, function() {
this.initAutoCompleteListener(function(place) {
this.autocompletePlace = place;
})
}.bind(this));
}
}
}
</script>