primevue-mirror/pages/steps/Payment.vue

<template>
    <div class="stepsdemo-content">
        <Card>
            <template v-slot:title> Payment Information </template>
            <template v-slot:subtitle> Enter your card details </template>
            <template v-slot:content>
                <div class="p-fluid formgrid grid">
                    <div class="field col-12">
                        <label for="class">Card Holder Name</label>
                        <InputText v-model="cardholderName" type="text" />
                    </div>
                    <div class="field col-8">
                        <label id="number" for="lastname">Number</label>
                        <InputMask id="number" v-model="cardholderNumber" mask="9999-9999-9999-9999" />
                    </div>
                    <div class="field col-2">
                        <label id="date" for="date">Date</label>
                        <InputMask id="date" v-model="date" mask="99/99" />
                    </div>
                    <div class="field col-2">
                        <label for="cvv">CVV</label>
                        <InputMask id="cvv" v-model="cvv" mask="999" />
                    </div>
                    <div class="field-checkbox col-12">
                        <Checkbox id="remember" v-model="remember" :binary="true" />
                        <label for="remember" class="p-checkbox-label">Save credit card information for future</label>
                    </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 {
            cardholderName: '',
            cardholderNumber: '',
            date: '',
            cvv: '',
            remember: false
        };
    },
    methods: {
        nextPage() {
            this.$emit('next-page', { formData: { cardholderName: this.cardholderName, cardholderNumber: this.cardholderNumber, date: this.date, cvv: this.cvv }, pageIndex: 2 });
        },
        prevPage() {
            this.$emit('prev-page', { pageIndex: 2 });
        }
    }
};
</script>