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 >${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 >
        <div >
          <div  style="width: 100%">
            <div  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>

CodePudding user response：

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:

1. setup() is called
2. fjson is initialized
3. The onMounted callback is setup
4. Log fjson
5. setup() finishes
6. onMounted is called and fjson is set

It looks like you have two other issues.

Your return statement should be:

return { mapDiv, coords, fjson };

Your v-for it should be:

<div v-for="result in fjson.value.data.results">
   <p>{{ result }}</p>
</div>

CodePudding user response：

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