VueJS: Not printing data returned in method

Question

I'm successfully getting data into the console. When I try to print that data to the page by calling the method in double moustache braces it doesn't appear on screen. All other data in template appears just fine.

Template:

<template>
   <div>
      <div v-for="data in imageData" :key="data.id">
      <div class="card">
        <img :src="data.source" :alt="data.caption" class="card-img" />
        <div class="text-box">
          <p>{{ moment(data.timestamp.toDate()).format("MMM Do YYYY") }}</p>
          <p>{{ data.caption }}</p>
// The Geocoding method is the problem
          <p>{{reverseGeocode(data.location.df, data.location.wf)}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

Method:

methods: {
    reverseGeocode: (lat, long) => {
      fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${long}&key=API_KEY&result_type=locality`
          ).then((res) =>
              res.json().then((data) => {
      console.log(data.results[0].formatted_address); // works fine
      return data.results[0].formatted_address;
        })
      );
    },
  },

Here's the image data I'm getting in props

score 1 · Answer 1 · answered Sep 01 '20 at 12:45

Your problem is a common problem when you start making requests in JavaScript.

The date requests are asynchronous so the method cannot return a value after the execution of the method has finished.

Imagine the following call stack:

Start method.
Throw fetch. <- Asynchronous
Finish method.
Fetch ends.

You are trying to do a return in step 4 and it should be in 3.

To solve this you should use async with await. You could also solve it by making a component and passing the data (this is my favorite since you are using vue).

Component parent

<template>
    <div>
        <component-card v-for="data in imageData" :key="data.id" :dataItem="data">
        </component-card>
    </div>
</template>

Child component

<template>
    <div class="card">
        <img :src="dataItem.source" :alt="dataItem.caption" class="card-img" />
        <div class="text-box">
            <p>{{ moment(dataItem.timestamp.toDate()).format("MMM Do YYYY") }}</p>
            <p>{{ dataItem.caption }}</p>
            <p>{{formattedAddress}}</p>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        dataItem: {
            type: {},
            default: () => ({})
        }
    },
    data() {
        return {
            formattedAddress: ""
        };
    },
    created() {
       this.reverseGeocode(this.dataItem.location.df, dataItem.location.wf) 
    },
    methods: {
        reverseGeocode(lat, long) {
            fetch(
                `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${long}&key=API_KEY&result_type=locality`
            ).then(res =>
                res.json().then(data => {
                    console.log(data.results[0].formatted_address); // works fine
                    this.formattedAddress = data.results[0].formatted_address;
                })
            );
        }
    }
};
</script>

I have not tried it, surely some things are missing but the template should be that.

I agree, the parent component should pass in the data to a child component which can take care of it's individual web request — Ayudh, Sep 01 '20 at 13:33

score 0 · Answer 2 · edited Jul 15 '22 at 04:49

0

You should change your approach to the following:

Do all requests in the created() lifecycle method and store the results in a data attribute then iterate over the data attribute. The created() lifecycle method executes before the DOM is mounted so all data fetching APIs should be called there. FYR: https://v2.vuejs.org/v2/guide/instance.html

Please also refer to Vue.js - Which component lifecycle should be used for fetching data?

edited Jul 15 '22 at 04:49

tony19

125,647
18
229
307

answered Sep 01 '20 at 10:14

Ayudh

1,673
1
22
55

Thanks for your advice. Made a change so I'd store the data coming in from props and then add a formattedAddress prop to that stored data, however I seem to experiencing the same issue: the formatted address isn't being returned. Here's what I added: http://collabedit.com/xwe3e – crevulus Sep 01 '20 at 10:36
You should create one child component which takes care of it's own web request instead of having one component do multiple requests in a `for` loop. This way is cleaner and more manageable. Pass in the `lat` and `lon` as props to the child component which then calls the `reverseGeocode` in `created()` and finally in `res.join.then(data => {xxx})` assigns what you need to a data attribute – Ayudh Sep 01 '20 at 13:37
Check @Vallemar 's answer for reference – Ayudh Sep 01 '20 at 13:46

score 0 · Answer 3 · answered Sep 01 '20 at 14:32

The above I think is correct as well, but I would push for async

async reverseGeocode(lat, long) {
   const response = await fetch(
                `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${long}&key=API_KEY&result_type=locality`
            );
   const data = response.json();
   return data.results[0].formatted_address;
}

VueJS: Not printing data returned in method

3 Answers3