Javascript VueJs如何在呈现html之前完成异步请求?
我使用el popover尝试展示一些东西,下面是代码:Javascript VueJs如何在呈现html之前完成异步请求?,javascript,typescript,vue.js,element,element-ui,Javascript,Typescript,Vue.js,Element,Element Ui,我使用el popover尝试展示一些东西,下面是代码: <template v-slot:userItem="testData" > <template v-if="testData.roleData!=null"> <el-popover v-for ="(item,index) in testData.roleData.split(',')" :key=&q
<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>
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》的内容呢?
非常感谢。您可以将响应数据保存到另一个对象中,例如,
内容
,当请求完成时,el popover内容将自动更新,而不是尝试通过返回直接从axios请求获取响应(我认为您不能)
在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];
}
}
导出默认类测试扩展Vue{
内容:对象={};//{
console.log(response.data);
this.contents[roleId]=this.updateTransfer(response.data);
})
.接住(
(错误)=>{
信息({
消息:error.message,
键入:“错误”,
持续时间:3*1000
})
});
}
}
返回此.contents[roleId];
}
}
您可以尝试添加加载程序,直到收到异步请求的响应。我如何才能看到el popover的内容
-只有在有内容时才能看到