VueJs-如何在渲染前完成一个异步请求html?
VueJs-How to complete an asynchronous request before rendering html?
我用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
的内容?
非常感谢。
与其尝试通过 return 直接从 axios 请求获取响应(我认为你不能),你可以将响应数据保存到另一个对象中,例如 contents
,当请求完成,el-popover内容会自动更新。
在你的 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];
}
}
我用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
的内容?
非常感谢。
与其尝试通过 return 直接从 axios 请求获取响应(我认为你不能),你可以将响应数据保存到另一个对象中,例如 contents
,当请求完成,el-popover内容会自动更新。
在你的 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];
}
}