primevue-mirror/pages/steps/Confirmation.vue

<template>
    <div class="stepsdemo-content">
        <ClientOnly>
            <Card>
                <template v-slot:title> Confirmation </template>
                <template v-slot:content>
                    <div class="field col-12">
                        <label for="class">Name</label>
                        <b>{{ formData.firstname ? formData.firstname : '-' }} {{ formData.lastname ? formData.lastname : '-' }}</b>
                    </div>
                    <div class="field col-12">
                        <label for="Age">Age</label>
                        <b>{{ formData.age ? formData.age : '-' }}</b>
                    </div>
                    <div class="field col-12">
                        <label for="Age">Seat Class</label>
                        <b>{{ formData.class ? formData.class : '-' }}</b>
                    </div>
                    <div class="field col-12">
                        <label for="Age">Wagon Number</label>
                        <b>{{ formData.vagon ? formData.vagon : '-' }}</b>
                    </div>
                    <div class="field col-12">
                        <label for="Age">Seat</label>
                        <b>{{ formData.seat ? formData.seat : '-' }}</b>
                    </div>
                    <div class="field col-12">
                        <label for="Age">Cardholder Name</label>
                        <b>{{ formData.cardholderName ? formData.cardholderName : '-' }}</b>
                    </div>
                    <div class="field col-12">
                        <label for="Age">Card Number</label>
                        <b>{{ formData.cardholderNumber ? formData.cardholderNumber : '-' }}</b>
                    </div>
                    <div class="field col-12">
                        <label for="Age">Date</label>
                        <b>{{ formData.date ? formData.date : '-' }}</b>
                    </div>
                    <div class="field col-12">
                        <label for="Age">CVV</label>
                        <b>{{ formData.cvv && formData.cvv.length === 3 ? '**' + formData.cvv[2] : '-' }}</b>
                    </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="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success" />
                    </div>
                </template>
            </Card>
        </ClientOnly>
    </div>
</template>

<script>
export default {
    props: {
        formData: Object
    },
    methods: {
        prevPage() {
            this.$emit('prev-page', { pageIndex: 3 });
        },
        complete() {
            this.$emit('complete');
        }
    }
};
</script>