vue carousel with dynamic data

Question

carousel with data from the database can not be displayed

data from the database has been retrieved, it's just that it can't appear 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>

data from loadfield results are displayed as headers on the card and data from loadschedule results are displayed as buttons on the card

please upvote my answer if it helped you – Boussadjra Brahim Sep 04 '19 at 08:45 — Boussadjra Brahim, Sep 04 '19 at 08:45

score 0 · Accepted Answer · answered Aug 30 '19 at 23:50

Try to remove the binding sign : from v-for directive, the directives are bound by default to your properties :

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

vue carousel with dynamic data

1 Answers1