My goal is to update a table dynamically using data from a Google Maps query of nearby areas. The query successfully retrieves the correct data in the onMounted lifecycle, but fails to display or return the data during rendering.
I have experimented with making it reactive, using a ref, moving it to a different method, and trying many other strategies.
The axios request does log the relevant data, as indicated in the code below, but for some reason, the axios get value is not returned when rendering.
<script>
import { reactive, ref, onMounted } from "vue";
import Vue3Geolocation from "vue3-geolocation";
const axios = require("axios");
export default {
name: "App",
setup() {
let fjson = ref(null);
onMounted(async () => {
const URL = google query url
fjson.value = await axios.get(URL, {
headers: {
"X-Requested-With": "XMLHttpRequest",
},
});
fjson.value = JSON.parse(JSON.stringify(fjson.value));
**** THIS LOGS THE RIGHT VALUE! ****
console.log(fjson.value.data.results);
if (fjson.value.data.results.length > 2) {
for (let index = 0; index < 3; index++) {
console.log(fjson.value.data.results[index]);
}
}
**** ALSO WORKS! ****
fjson.value.data.results.forEach((place) => {
const lat = place.geometry.location.lat;
const lng = place.geometry.location.lng;
let marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
});
google.maps.event.addListener(marker, "click", () => {
infowindow.setContent(
`<div class="ui header">${place.name}</div><p>${place.vicinity}</p>`
);
infowindow.open(map, marker);
});
});
});
**** LOGS NULL :( ****
console.log(fjson.value);
return { mapDiv, coords, fjson: fjson.value };
},
};
</script>
<template>
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12 d-flex align-items-stretch">
<div class="card" style="width: 100%">
<div class="card-header text-white" style="background-color: #00aa9e">
<div v-for="result in fjson">
<p>{{ result }}</p>
</div>
Nearby churches
</div>
</div>
</div>
</div>
<div ref="mapDiv" style="width: 100%; height: 80vh" />
</template>