vue.js API 使用动态模式调用

Question

我已经使用 AXIOS 从我的 API 获取数据，获取数据需要一些额外的时间，我已经使用 CREATED 挂钩点来调用 API。

<template>
 <div>
     Period
    {{This.GetPeriod()}} 
    </div>
</template>


data:function(){
  APIData:{}
},
created :{
   GetData:function(){
       ---- AXIOS get call
   }
},
methods:{
  GetPeriod:function(){
    return this.ApiData.StartDate+":'+ApiData.EndDate 
  }
}

现在我遇到了以下异常：

开始日期和结束日期未定义。
GetPeriod 方法先于 Created 挂钩运行。这就是 startDate 和 EndDate 未定义的原因。因为那是数据中的属性，它将在 API 调用后分配到 APIData 中。

我的整个代码运行了 2 次。

{
"Banners":[{ some properties  }],
"Links":[{ some properties  }],
"Widgets":[{ properties }],
"Layouts":{
  "LayoutName":"Layout4",
  "ContentDefinitionID":"9",
  "PlaceHolderID":"",
  "DisplayOrder":"",
  "Type":"EmployeeLanding",
  "StartDate":null,
  "EndDate":null,
  "VariantID":"EFDD2115",
  "Status":null,
  "Audience":{  
     "Groups":[],
     "Segments":[ ],
     "PopupMode":0,
     "ErrorMessage":null
  },
  "PopupMode":0,
  "ErrorMessage":null
}

}

startDate 和 EndDate 在布局中属性所以我需要在我的 Vue.js 上创建模式还是可以动态管理以便它不会给出 undefined 的异常。另外代码是运行 2次

Answer 1

您要使用的 created 挂钩是一个函数，您可以在文档中看到 Lifecycle-Hooks
您也可以使 GetPeriod 成为一个计算值，因为它在语义上更适合这里。

如果没有收到错误，您可以设置开始日期和结束日期的默认值，或者在计算期间之前设置默认值，或者您可以检查是否已定义这些值。如果不是 return 破折号或空字符串。

为了使其更加用户友好，您可以尝试为您的应用设置加载状态，并在 xhr 调用完成后填充您的模板并删除加载程序。

用法示例

<template>
  <div>
   Period: {{period}} 
  </div>
</template>

<script>
data:function(){
  APIData:{}
},
created(){
 this.getData();
},
methods: {
 getData:function(){
    ---- AXIOS get call
 }
},
computed:{
  period:function(){
   let {StartDate, EndDate} = this.ApiData;
   return (StartDate && EndDate) ? `${StartDate} : ${EndDate}` : ''; 
  }
}
</script>

vue.js API 使用动态模式调用

vue.js API Call with Dynamic schema

javascript

vue.js

axios