[Vuejs]-In component data is fetched only when i make some changes in it

by

1👍

✅

Data from the parent component are loaded asynchronously, so the created lifecycle hook inside the component is executed before the actual data comes, when they’re still set as an empty array and are not reactive to change.

You can fix this by setting a watch inside the component, like this:

methods: {
  ...
},
watch: {
  zones_and_locations (newVal, oldVal) {
    this.loadGoogleMaps();
  }
}

orelse you can set a reference to the child component and invoke its method when data comes:

  <!-- main view -->
  <Maps
    v-bind:zones_and_locations="zones_and_locations"
    ref="myMap"
  ></Maps>

    async fetchPlacesData() {
      const { data } = await Catalogs.getZoneLocations();
      if (data.output === null) {
        this.nullDataException();
      } else {
        const places = [];
        data.output.forEach((value, index) => {
          places.push(value);
        });
        this.zones_and_locations = places;
        // using $refs
        this.$refs.myMap.loadGoogleMaps();
        this.loadingConfig.isLoading = false;
      }
    },
👤niccord

Leave a comment