in my Vue js project i have problem with API data, the page loads fast but data from API takes more than 5 sec to load. However, my Api response is very fast in console.
in below code i implemented api in other file called API services and i put a class that contains all my APIs called BuildingService, so i called API on mounted and it loads slow
can any one help me in this?
<script>
import Vue from 'vue'
import BuildingsService from "@/services/ApiService"
Vue.use(VueClipboard)
export default {
data(){
return{
buildings:[],
}
},
name: 'icons',
components: {
BaseHeader
},
mounted:function(){
BuildingsService.getBuildings().then((response) => {
this.buildings = response.data.response;
console.log(response.data.response,"dd");
});
}
};
</script>
<b-col lg="3" md="6" v-for="(building, index) in buildings"
:key="index" >
>{{building.building_number}}
</b-col>
use created instead of mounted:
created() {
BuildingsService.getBuildings().then((response) => {
this.buildings = response.data.response;
console.log(response.data.response,"dd");
});
}
for reference: enter link description here