66 lines
2.5 KiB
Vue
Executable File
66 lines
2.5 KiB
Vue
Executable File
<template>
|
|
<div class="stepsdemo-content">
|
|
<Card>
|
|
<template v-slot:title> Personal Information </template>
|
|
<template v-slot:subtitle> Enter your personal information </template>
|
|
<template v-slot:content>
|
|
<div class="p-fluid">
|
|
<div class="field">
|
|
<label for="firstname">Firstname</label>
|
|
<InputText id="firstname" v-model="firstname" :class="{ 'p-invalid': validationErrors.firstname && submitted }" />
|
|
<small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
|
|
</div>
|
|
<div class="field">
|
|
<label for="lastname">Lastname</label>
|
|
<InputText id="lastname" v-model="lastname" :class="{ 'p-invalid': validationErrors.lastname && submitted }" />
|
|
<small v-show="validationErrors.lastname && submitted" class="p-error">Lastname is required.</small>
|
|
</div>
|
|
<div class="field">
|
|
<label for="age">Age</label>
|
|
<InputNumber id="age" v-model="age" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:footer>
|
|
<div class="grid grid-nogutter justify-content-between">
|
|
<i></i>
|
|
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
|
</div>
|
|
</template>
|
|
</Card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
emits: ['next-page'],
|
|
data() {
|
|
return {
|
|
firstname: '',
|
|
lastname: '',
|
|
age: null,
|
|
submitted: false,
|
|
validationErrors: {}
|
|
};
|
|
},
|
|
methods: {
|
|
nextPage() {
|
|
this.submitted = true;
|
|
|
|
if (this.validateForm()) {
|
|
this.$emit('next-page', { formData: { firstname: this.firstname, lastname: this.lastname, age: this.age }, pageIndex: 0 });
|
|
}
|
|
},
|
|
validateForm() {
|
|
if (!this.firstname.trim()) this.validationErrors['firstname'] = true;
|
|
else delete this.validationErrors['firstname'];
|
|
|
|
if (!this.lastname.trim()) this.validationErrors['lastname'] = true;
|
|
else delete this.validationErrors['lastname'];
|
|
|
|
return !Object.keys(this.validationErrors).length;
|
|
}
|
|
}
|
|
};
|
|
</script>
|