The carousel is having trouble displaying data from the database
Although data has been successfully retrieved from the database, it is not appearing in the UI
<b-row>
<div class="card-carousel-wrapper">
<div class="card-carousel--nav__left" v-on:click="moveCarousel(-1)" :disable="atHeadOfList"></div>
<div class="card-carousel">
<div class="card-carousel--overflow-container">
<div class="card-carousel-cards" :style="{transform:'translateX'+'('+currentOffset+'px'+')'}">
<div class="card-carousel-card" :v-for="field in fieldlist">
<div class="card-carousel--card-header">{{fieldlist.value}}</div>
<div class="card-carousel--card" :v-for="schedule in schedulelist">
<div class="btn button" :class="classStatus()" v-on:click="classStatus(3)" :disable="disableButton(2)">{{schedulelist.start_time}}-{{schedulelist.end_time}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-carousel--nav__right" v-on:click="moveCarousel(1)" :disable="atEndOfList"></div>
</div>
</b-row>
<script>
loadSchedule(){
axios({
url: 'bookings/schedule/list/',
method:'PUT',
data:{
id_field:this.selectedField
}
}).then(response=>{
this.schedulelist = response.data.serve
}).catch(error=>{
console.log(error);
});
},
loadLocation(){
let index=0;
axios({
url: '/location',
methods:'GET',
}).then(response=>{
this.locationList = response.data.serve
for (index=0; index< this.locationList.length; index++) {
this.location.push({value: this.locationList[index].id_location, text: this.locationList[index].location_name})
}
console.log(this.location);
}).catch(error=>{
console.log(error);
})
},
loadField(){
let index=0;
axios({
url: '/field/data/'+this.selectedLocation,
methods:'GET',
}).then(response=>{
console.log(response);
this.fieldlist = response.data.serve
this.field = []
for (index=0; index< this.fieldlist.length; index++) {
this.field.push({value: this.fieldlist[index].id_field, text: this.fieldlist[index].field_name})
}
}).catch(error=>{
console.log(error);
})
},
</script>
The headers on the card display data from the loadfield results, while the buttons on the card display data from the loadschedule results