vue 想要先加载完所有数据再渲染页面

使用v-if来控制

  • 先设置showCardfalse,内容card""
  • 请求成功后设置showCardtrue,内容card为请求得到的数据res.data
<div v-if="showCard"><div>

data() {
  return {
    card:"",
    showCard:false,
  }
} 

created() {
  this.$vux.loading.show({ text: "正在加载" });
  this.$api.cardInterface
  .getCard({
    //   cardId:"001"
  })
  .then(res => {
    this.$vux.loading.hide();
    console.log(res);
    if (res.data.success) {
      this.showCard = true;
      this.card = res.data;
    } else {
      this.$vux.toast.show({ type: "cancel", text: "提交失败" });
    }
  })
  .catch(err => {
    this.$vux.loading.hide();
    this.$vux.toast.show({ type: "warn", text: "Request failed" });
    console.error(err);
  });
复制代码
评论 4 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值