I am trying to dynamically update a table based on a google maps query of nearby areas. The query is returning the right data in the onMounted lifecycle, but does not return the appropriate data or display it when it comes time to render.
I have tried making it reactive, a ref, moving it to another method and much more.
The axois request actually is logging the relevant data, as I mark in the program below, but does not actually return the axios get value 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>
onMounted() isn't called during the setup() method, this is just setting up a callback for when the component is mounted. The setup() method will run and complete before the onMounted() callback is called. Since console.log(fjson.value); is at the end of the setup() method it's called before any of the code in onMounted() is executed, so it will be null there, that is not a bug. Essentially the flow would look like:
setup() is calledfjson is initializedonMounted callback is setupfjsonsetup() finishesonMounted is called and fjson is setIt looks like you have two other issues.
Your return statement should be:
return { mapDiv, coords, fjson };
You want to make sure you're returning the reactive object. If you just return value you'll get the value at the time of the return, which would be null and won't be updated by the onMounted callback.
Your v-for it should be:
<div v-for="result in fjson.value.data.results">
<p>{{ result }}</p>
</div>
You want to make sure you're telling Vue the correct property to use for the v-for same as you would for forEach.
onMounted is called after the setup function. Since your console.log(fjson.value); is outside of your onMounted callback, it runs before your axios request.
your v-for is also wrong. It should be:
<div v-for="result in fjson.data.results">
<p>{{ result }}</p>
</div>
since results is the actual array