VueJs-如何在渲染html之前完成一个异步请求？答案

【问题标题】：VueJs-How to complete an asynchronous request before rendering html?VueJs-如何在渲染html之前完成一个异步请求？
【发布时间】：2021-01-11 12:32:58
【问题描述】：

我用el-popover尝试显示一些东西，这里是代码：

<template v-slot:userItem="testData" >
    <template v-if="testData.roleData!=null">
      <el-popover
      v-for ="(item,index) in testData.roleData.split(',')"
      :key="index"
      placement="top-start"
      title="Authority"
      width="200"
      trigger="hover"
      :content="getClaimValue(item.split(':')[0])">
       <el-link  slot="reference" type="primary"  @click="test1(item.split(':')[0])" >{{item.split(':')[1]}}</el-link>
       </el-popover>
    </template>

现在的问题是我看不到el-popover 的content。我猜是因为getClaimValue()方法是异步的，代码如下：

private getClaimValue(roleId:any){
    axios.get(`${env.identityServer}/User/GetClaimByRoleId?roleId=${roleId}`)
                .then((response) => {
                    console.log(response.data);
                    return this.updateTransfer(response.data);
                    
                })
                .catch(
                  (error) => {   
                         Message({
                            message: error.message,
                            type: 'error',
                            duration: 3 * 1000
                          })                  
                  });
  }

那么问题出在哪里，我如何才能看到我的 el-popover 内容？非常感谢。

【问题讨论】：

你可以尝试添加一个加载器，直到你从你的异步请求中得到响应。
how could I see my content of el-popover - 在有内容之前你不能这样做

标签： javascript typescript vue.js element element-ui

【解决方案1】：

与其尝试直接通过return（我认为你做不到）从axios请求中获取响应，您可以将响应数据保存到另一个对象中，例如contents，当请求完成时，el-弹出框内容会自动更新。

在你的 xxx.vue 中：

 export default class Test extends Vue {

       contents: Object = {};// <--- where to store all contents for el-popovers

       private getClaimValue(roleId:any){
           if(!this.contents[roleId]){
             this.contents[roleId] = "loading";
             axios.get(`${env.identityServer}/User/GetClaimByRoleId?roleId=${roleId}`)
                .then((response) => {
                    console.log(response.data);
                    this.contents[roleId] = this.updateTransfer(response.data);
                    
                })
                .catch(
                  (error) => {   
                         Message({
                            message: error.message,
                            type: 'error',
                            duration: 3 * 1000
                          })                  
                  });
             }
           }
          
           return this.contents[roleId];
        }

      
 }

【讨论】：