[Vuejs]-Vue.js API Call with Dynamic schema

by

0👍

✅

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>

Leave a comment