<template> <div class="stepsdemo-content"> <Card> <template v-slot:title> Seat Information </template> <template v-slot:subtitle> Choose your seat </template> <template v-slot:content> <div class="p-fluid formgrid grid"> <div class="field col-12 md:col-6"> <label for="class">Class</label> <Dropdown v-model="selectedClass" inputId="class" :options="classes" @change="setWagons($event)" optionLabel="name" placeholder="Select a Class" /> </div> <div class="field col-12 md:col-6"> <label for="lastname">Wagon</label> <Dropdown v-model="selectedWagon" inputId="wagon" :options="wagons" @change="setSeats($event)" optionLabel="wagon" placeholder="Select a Wagon" /> </div> <div class="field col-12"> <label for="seat">Seat</label> <Dropdown v-model="selectedSeat" inputId="seat" :options="seats" optionLabel="seat" placeholder="Select a Seat" /> </div> </div> </template> <template v-slot:footer> <div class="grid grid-nogutter justify-content-between"> <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" /> <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" /> </div> </template> </Card> </div> </template> <script> export default { emits: ['next-page', 'prev-page'], data() { return { selectedClass: '', classes: [ { name: 'First Class', code: 'A', factor: 1 }, { name: 'Second Class', code: 'B', factor: 2 }, { name: 'Third Class', code: 'C', factor: 3 } ], wagons: [], selectedWagon: '', seats: [], selectedSeat: '' }; }, methods: { setWagons(event) { if (this.selectedClass && event.value) { this.wagons = []; this.seats = []; for (let i = 1; i < 3 * event.value.factor; i++) { this.wagons.push({ wagon: i + event.value.code, type: event.value.name, factor: event.value.factor }); } } }, setSeats(event) { if (this.selectedWagon && event.value) { this.seats = []; for (let i = 1; i < 10 * event.value.factor; i++) { this.seats.push({ seat: i, type: event.value.type }); } } }, nextPage() { this.$emit('next-page', { formData: { class: this.selectedClass.name, wagon: this.selectedWagon.wagon, seat: this.selectedSeat.seat }, pageIndex: 1 }); }, prevPage() { this.$emit('prev-page', { pageIndex: 1 }); } } }; </script>