Currently, I am diving into the world of Vue.js and exploring Single File Components. My goal here is to utilize the Geolocation API to prompt the user for their location, retrieve their latitude and longitude coordinates, and then display this information on the page. While I have successfully fetched the coordinate values through console.log, I'm encountering an issue updating the SFC with these values. There might be a step I'm overlooking.
geolocation.vue
<template>
<p>Your current location: {{ text }}. Is this correct?</p>
</template>
<script>
console.log('inside geolocation.vue');
let text = "N/A";
export default {
name: "geolocation",
data: function () {
return {
text: text,
}
},
methods: {
findLocation: function() {
let that = this;
console.log('inside findLocation()');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (pos) {
console.log('CONSOLE: ' + pos.coords.latitude + ', ' + pos.coords.longitude);
that.text = pos.coords.latitude + ', ' + pos.coords.longitude;
});
}
}
}
}
</script>
<style scoped>
p {
color: red;
font-size: 85%;
}
</style>
App.vue
<template>
<div class="center-text">
<h1 class="site-title">{{ app_name }}</h1>
<p>Welcome to the store page!</p>
<p>Soon products will be displayed based on inventory at distribution center(s) in the area.</p>
<geolocation/>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
import geolocation from './geolocation';
export default {
computed: {
...mapGetters(['app_name'])
},
components: {
geolocation
},
mounted: function() {
geolocation.methods.findLocation();
}
};
</script>
<style scoped>
.site-title {
font-family: 'Lobster', cursive;
}
.center-text {
text-align: center;
}
</style>