I encountered a Vue method call error when attempting to call a method from within another method in the application:
Here is the JavaScript code snippet:
const app = new Vue({
el: '#info',
data() {
return {
position: {},
areas: {}
};
},
ready() {
},
mounted() {
},
methods: {
prepareComponent(){
},
loadContent(){
console.log(this.position);
let queryString = '?lat='+this.position.coords.latitude+'&lon='+this.position.coords.longitude;
axios.get('/api/getarea'+queryString)
.then(response => {
this.areas = response.data;
this.showAreaData();
});
},
showAreaData(){
var cities = [];
for(var area of this.areas){
cities.push(area.city);
}
console.log(cities);
},
getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
this.position = position;
this.loadContent();
}, function(error) {
console.log(error);
});
}
},
},
});
And here is the corresponding HTML code:
<div id="info">
<a href="#" id="getPosition" class="btn btn-link" @click="getLocation">Get Position</a>
<ul>
</ul>
</div>
Upon executing the code, I received an error stating that loadContent is not defined (TypeError: this.loadContent is not a function). Can you help me identify what might be missing or causing this issue?