如何在离子 vue.js 的 v-for 循环中显示 function 的返回值？

Question

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

提前致谢

这是我的模板：

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

这是有问题的 function。

    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>