VueJS：不打印方法中返回的数据

如何解决VueJS：不打印方法中返回的数据

我已成功将数据导入控制台。当我尝试通过在双小括号中调用该方法将数据打印到页面时，它没有出现在屏幕上。模板中的所有其他数据都很好。

模板：

<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>

方法：

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;
        })
      );
    },},

这是我在道具中获得的图像数据

解决方法

当您开始使用JavaScript发出请求时，您的问题是一个常见问题。

日期请求是异步的，因此该方法执行完成后该方法无法返回值。

想象以下调用堆栈：

启动方法。
抛出。
完成方法。
提取结束。

您正在尝试在步骤4中进行退货，应该在步骤3中。

要解决此问题，您应该使用async with await。您也可以通过制作一个组件并传递数据来解决它（这是我最喜欢的，因为您正在使用vue）。

父组件

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

子组件

<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>

我还没有尝试过，肯定缺少一些东西，但是模板应该是这样。

您应该将方法更改为以下内容：

执行created（）生命周期方法中的所有请求，并将结果存储在data属性中，然后遍历data属性。 created()生命周期方法在安装DOM之前执行，因此应在此处调用所有数据提取API。前言：https://vuejs.org/v2/guide/instance.html

另请参阅Vue.js - Which component lifecycle should be used for fetching data?

我认为以上内容也是正确的，但我会要求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;
}