如何在 Vue.js 中的光滑 slider 中使用循环

Question

我在引导程序模式中使用 vue-slick 链接https://www.npmjs.com/package/vue-slick ，当我使用v-for循环遍历它显示的项目时就是这样。

这是我的代码片段

 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>

可能是什么问题呢？

Answer 1

对不起，我太忙了，我没有时间发布上述解决方案，尽管 css 样式需要改进，但我已经找到了解决方法，但它仍然可以解决我想要的问题。 我所做的是在名为 currentIndex 的数据中创建属性，并在计算属性中创建一个名为 current vehicle 的 function。 然后我循环 [currentIndex] 来获取currentVehicle

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

所以 currentVehicle() 返回视图中车辆的索引。

这是一个工作的

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