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

8,254 阅读1分钟

使用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);
  });