我如何在Ionic vue.js的v-for循环中显示函数的返回值？

Question

因此，我试图显示通过在模板的v-for部分中调用getUserData（）函数获得的返回数据。数据已正确注销，但未显示。有谁知道这里发生了什么？

预先感谢

这是我的模板：

<template>
  <ion-page>
    <NavBar/>
    <ion-content padding>
      {{currentuser.vorname}} haha
      <br/>
      Friends:
      <ion-list>
        <ion-item v-for="friend in this.currentuser.friends" :key="friend"> {{getUserData(friend)}} </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

这是有问题的功能。

    getUserData: function(email){

      console.log(email);

      fetch("/getUserEntrybyEmail", {
        headers: {
          'Accept': 'application/json, text/plain, */*',
          "Content-type" : "application/json"
        },
        method: "POST",
        body: JSON.stringify( { "email" : email } ),
      }).then(response=>{
        if(response.status==200){
        return response.json();}
        else{
          console.log("Access Denied.")
        }
      }).then((data)=>{

        console.log(data)
        return data;



      })
    }

Answer 1

您需要稍微更新一下逻辑。

步骤1

• 在您的data中添加朋友属性

  data() {
    return {
      friend: []
    }
  },

步骤2

• 请按照您的逻辑而非模板来处理循环。
• 获取每个朋友的数据，并将结果添加到friends数组中
• 取决于您的逻辑，此循环可以在方法内部，并且可以在mounted()中调用该方法

      for (let a = 0; this.currentuser.friends.length > a; a++) {
        const email = this.currentuser.friends[a].email;
        fetch("/getUserEntrybyEmail", {
          headers: {
            'Accept': 'application/json, text/plain, */*',
            "Content-type" : "application/json"
          },
          method: "POST",
          body: JSON.stringify( { "email" : email } ),
        }).then(response => {
          if(response.status==200){
          return response.json();
          } else {
            console.log("Access Denied.")
          }
        }).then((data)=>{
          console.log(data)
    // add each result to the friends array
          this.friend.push(data);
        })
      }

第3步-更新模板以使用friends数组

<template>
  <ion-page>
    <NavBar/>
    <ion-content padding>
      {{currentuser.vorname}} haha
      <br/>
      Friends:
      <ion-list>
        <ion-item v-for="(friend, index) in friends" :key="index"> {{ friend }} </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>