带有动态模式的 vue.js API 调用

Question

I have used AXIOS for fetching data from my API, it takes some extra time to get the data, have used CREATED hook point to call the 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 
  }
}

Now I am getting below exception :

1. StartDate and Endate is undefined.
2. The GetPeriod Method runs earlier then Created hook. that is the reason the startDate and EndDate is undefined. as that is the property in the data which which will be assigned in APIData after API call.

3. My whole code runs 2 times.

    { "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 }

   }

The startDate and EndDate is in the Layout property so Do I need to create the schema on my Vue.js or can be managed dynamically so that it do not give exception of undefined . Also the code is running 2 times.

Answer 1

The created hook you want to use is a function as you can see in the docs Lifecycle-Hooks
Also you could make GetPeriod a computed value as its more fitting here semantically.

For not getting the error you can either set default values for start and end date or before calculating the period or you can check if those are defined. If not return a dash or an empty string.

To make it more user friendly you can try having a loading state for your app, and after the xhr call is finished populate your templates and remove the loader.

Example usage

<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>