Asynchronous 一旦我从承诺中得到了价值，我就给我价值

我有一个呈现列表的模板。其中两个值需要进行地理编码（从lat-lon值开始，我想显示地址）。我在控制台中有值，但li显示[object Promise]。我知道渲染是不同步的，所以我尝试只在有值时使用标志来显示li，但它们从未显示。基本上我理解问题所在，但不知道如何重新排列代码以使其正常工作。 以下是模板：

<div v-if="!isLoading && Object.keys(currentActivity).length > 0">
            <ul
              v-for="value in currentActivity"
              :key="value.id"
              class="listValues"
            >
              <li>Attività:
                <b>{{ value.activity.activityName }} - {{ value.related_activity }}
                </b>
              </li>
              <li>Inizio: <b>{{ value.start }}</b></li>
              <li>Fine: <b>{{ value.end }}</b></li>
              <li>Durata: <b>{{ timeConvert(value.duration) }}</b></li>
              <li v-if="!isGeocoding">Punto di partenza: <b>{{ getAddress(getLatLng(value.starting_point)) }}</b></li>
              <li v-if="!isGeocoding">Punto di arrivo: <b>{{ getAddress(getLatLng(value.arrival_point)) }}</b></li>
              <li>Stato: <b>{{ value.status | stato }}</b></li>
              <li>Distanza: <b>{{ kmCovert(value.travel_distance) }}</b></li>
              <li>Kcal consumate: <b>{{ value.kcal }}</b></li>
              <li>Produzione di Co2: <b>{{ value.co2 }}</b></li>
              <li>Costo: <b>{{ value.cost }} €</b></li>
              <li>Utente:
                <router-link :to="{name: 'SchedaUtente', params: { userId: value.owner.id }}">
                  <b style="text-decoration: underline;">
                    {{ value.owner.username }}
                  </b>
                </router-link>
              </li>
            </ul>
          </div>

这样两个地址就永远不会显示，如果我删除标志isGeocoding，正如我前面所说，我在控制台中得到了值，但在模板中得到了[objectpromise]。 有人能帮忙吗？ 谢谢

---

x

Vue似乎不能很好地处理返回承诺的方法

为了给你这个解决办法，我付出了很大的努力：（你可以稍后感谢我：D）

创建一个组件并将其包含在每一行中，将方法输入传递到其中，然后让它进行计算：

演示：

要点：

表:

组成部分：

方法：{
getAddress（）{
返回此。$gmapipPromiseLazy（）。然后（（）=>{
//将值赋给数据变量！（这是技巧发生时）
this.addr=this.point+10
})
}
},
挂载（）{
//调用异步方法
this.getAddress（）
}

我就是这样让它工作的：

我添加了反应式数据属性来表示起始地址和到达地址，并添加了两个const以获得更可读的代码，因此在数据中：

我在模板中引用了这些属性，而不是承诺：

我在mounted中调用了此函数，如下所示：

async mounted() {
  await this.getActivityData()
},

我使其他两个函数更加可重用，因此：

注意getAddress函数开头和结尾的两个returns，这是我以前缺少的：

• 返回此。$GMAPIPPromiseLazy（）

• 返回地理编码地址

---

x

如果在返回console.log（address）之前返回它会发生什么？我得到了字符串地址，因为它应该在模板中。感谢您的时间@niccord，但我设法用另一种方法解决了它。请参阅下面的解决方案。x

startingAddress: null,
arrivalAddress: null,
start: null,
end: null

<li v-if="startingAddress">Punto di partenza: <b>{{ this.startingAddress }}</b></li>
<li v-if="arrivalAddress">Punto di arrivo: <b>{{ this.arrivalAddress }}</b></li>

async getActivityData() {
      this.isLoading = true
      const currentUser = this.$store.getters.currentProfile.user
      this.currentUser = currentUser
      console.log('current activity scheda attivita: ', this.currentActivity)
      this.start = this.getLatLng(this.currentActivity.activity.starting_point)
      this.end = this.getLatLng(this.currentActivity.activity.arrival_point)

      console.log('PROMISE',this.getAddress(this.start))
      const [startingAddress, arrivalAddress] = await 
      Promise.all([this.getAddress(this.start), this.getAddress(this.end)])

      this.startingAddress = startingAddress
      this.arrivalAddress = arrivalAddress

      this.isLoading = false
    },

async mounted() {
  await this.getActivityData()
},

getLatLng(sridPoint) {
   const arrayLatLng = sridPoint.replace('SRID=4326;POINT (', '').replace(')', '').split(' ')
   const latLng = { lat: parseFloat(arrayLatLng[1]), lng: parseFloat(arrayLatLng[0]) }
   return latLng
},
getAddress(latLng) {
   return this.$gmapApiPromiseLazy().then(() => {
   const geocodeAddress = new Promise(function(resolve, reject) {
     const geocoder = new google.maps.Geocoder()
     geocoder.geocode({ 'location': latLng }, (results, status) => {
       if (status === 'OK') {
         if (results.length > 0) {
           resolve(latLng = results[0].formatted_address)
         } else {
           reject(new Error('Couldnt\'t find the location.'))
         }
       }
     })
   })   
   return geocodeAddress.then(function(address) {
     console.log(address)
     return address
   })
 })
}