Estoy tratando de actualizar dinámicamente una tabla basada en una consulta de Google Maps de áreas cercanas. La consulta devuelve los datos correctos en el ciclo de vida onMounted, pero no devuelve los datos adecuados ni los muestra cuando llega el momento de la representación.
He intentado hacerlo reactivo, una referencia, moverlo a otro método y mucho más.
La solicitud de axois en realidad está registrando los datos relevantes, como marco en el programa a continuación, pero en realidad no devuelve el valor de obtención de axios al renderizar.
<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() no se llama durante el método setup() , esto solo configura una devolución de llamada para cuando se monta el componente. El método setup() se ejecutará y completará antes de que se llame a la devolución de llamada onMounted() . Desde console.log(fjson.value); está al final del método setup() , se llama antes de que se ejecute cualquier código en onMounted() , por lo que será nulo allí, eso no es un error. Esencialmente, el flujo se vería así:
setup() se llamafjson se inicializaonMounted está configuradafjsonsetup() terminaonMounted se llama y se establece fjsonParece que tienes otros dos problemas.
Su declaración de devolución debe ser:
return { mapDiv, coords, fjson }; Desea asegurarse de devolver el objeto reactivo. Si solo devuelve el value , obtendrá el valor en el momento de la devolución, que sería nulo y no se actualizará mediante la devolución de llamada onMounted .
Tu v-for que debería ser:
<div v-for="result in fjson.value.data.results"> <p>{{ result }}</p> </div> Debe asegurarse de decirle a Vue la propiedad correcta que debe usar para v-for misma manera que lo haría para forEach .
onMounted se llama después de la función de configuración. Desde su console.log(fjson.value); está fuera de su devolución de llamada onMounted, se ejecuta antes de su solicitud de axios.
tu v-for también está mal. Debería ser:
<div v-for="result in fjson.data.results"> <p>{{ result }}</p> </div>ya que los resultados son la matriz real