How to use a loop inside a slick slider in Vue.js

Question

I'm using vue-slick link https://www.npmjs.com/package/vue-slick inside a bootstrap modal and when i use a v-for loop to loop through the items it display's this.

Here's a snippet of my code

import Slick from 'vue-slick';
export default {
    props: ['vehicleRequest'],
    components: {'slick': Slick},
    data() {
        return {
            vehicle: {
                model: '',
                licensePlate: '',
                type: '',
                currentMileage: '',
                Availability: '',
                imageUrl: ''
            },
            vehicles: [],
            slickOptions: {
                infinite: true,
                slidesToShow: 5,
                slidesToScroll: 3,
            },
        }
    },
    mounted() {
        console.log("vehicleRequestId: " + JSON.stringify(this.vehicleRequest));
    },
    methods: {
        updated() {
            this.reInit();
        },
        reInit() {
            this.$refs.slickone.reSlick();
        },
        reserveVehicle() {},
        allocateVehicle() {},
        getVehicleRequest(id) {},
        approveOnline() {
            console.log("approve online!");
        },
        approveOffline() {
            console.log("approve offline!");
        },
        declineRequest() {
            $('#declineRequest-Modal').modal('hide');
            console.log("vehiclerequest: " + this.vehicleRequest);
            console.log("declined");
        },
        viewVehicle(vehicles) {
            let self = this;
            self.vehicles = vehicles
            $('#viewVehicle').modal('show');
        }
    }
}

<div 
    class="modal fade" 
    id="viewVehicle" 
    tabindex="-1" 
    role="dialog" 
    aria-labelledby="exampleModalCenterTitle" 
    aria-hidden="true"
>
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">{{vehicle.licensePlate}}</h5>
                <button 
                    type="button" 
                    class="close" 
                    data-dismiss="modal" 
                    aria-label="Close"
                >
                    <i 
                        class="fas fa-times-circle" 
                        aria-hidden="true" 
                        style="font-size:20px;color: #6e6f6c;"
                    ></i>
                </button>
            </div>
            <div class="modal-body">
                <slick ref="slickone" :options="slickOptions">
                    <div v-for='vehicle in vehicles' :key="vehicle.id">
                        <img :src="vehicle.vehicle_image_url">
                    </div>
                </slick>
            </div>
            <div class="col-md-10 mx-auto mb-4">
                <div class="row">
                    <div class="col-md-6">
                        <div class="w-100">
                            <button 
                                type="button" 
                                style="margin-left: 25%; padding-left: 20px; padding-right: 20px;" 
                                id="alternativeVehicle" 
                                @click="allocateVehicle()" 
                                class="unicef-btn unicef-reset small-button"
                            >ALLOCATE ALTERNATIVE VEHICLE</button>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="w-100">
                            <button 
                                type="button" 
                                style="margin-left: -7%;" 
                                @click="reserveVehicle()" 
                                id="reserve" 
                                class="unicef-btn unicef-primary small-button"
                            >RESERVE</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

What could be the problem ?

Answer 1

Sorry guys I was too busy that I hadn't got time to post the above solution anyway I've figured a way to do it although the css styling needs polishing but it still solves what I wanted. What I did was to create property in data called currentIndex and also a function called current vehicle in the computed property. Then I looped the [currentIndex] to get the currentVehicle

computed:{
    currentVehicle: function(){
        return this.vehicles[Math.abs(this.currentIndex) % this.vehicles.length];
    },
},

So the currentVehicle() returns the index of the vehicle in view.

Here's a working one

https://jsfiddle.net/nelsonk/ka01zvtm/