Merge pull request #3027 from bahadirsofuoglu/steps-demo-issue

Demo issue fixed

src/views/steps/StepsDemo.vue

@@ -3,7 +3,10 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Steps</h1>
-                <p>Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.</p>
+                <p>
+                    Steps components is an indicator for the steps in a wizard
+                    workflow. Example below uses nested routes with Steps.
+                </p>
             </div>
         </div>
 
@@ -13,7 +16,12 @@
             </div>
 
             <keep-alive>
-                <router-view :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete" />
+                <router-view
+                    :formData="formObject"
+                    @prevPage="prevPage($event)"
+                    @nextPage="nextPage($event)"
+                    @complete="complete"
+                />
             </keep-alive>
         </div>
 
@@ -22,38 +30,38 @@
 </template>
 
 <script>
-import StepsDoc from './StepsDoc';
+import StepsDoc from "./StepsDoc";
 
 export default {
     data() {
         return {
-            items: [{
-                label: 'Personal',
-                to: '/steps'
-            },
-            {
-                label: 'Seat',
-                to: '/steps/seat'
-            },
-            {
-                label: 'Payment',
-                to: '/steps/payment'
-            },
-            {
-                label: 'Confirmation',
-                to: '/steps/confirmation'
-            }],
-            formObject: {}
-        }
+            items: [
+                {
+                    label: "Personal",
+                    to: "/steps",
+                },
+                {
+                    label: "Seat",
+                    to: "/steps/seat",
+                },
+                {
+                    label: "Payment",
+                    to: "/steps/payment",
+                },
+                {
+                    label: "Confirmation",
+                    to: "/steps/confirmation",
+                },
+            ],
+            formObject: {},
+        };
     },
     components: {
-        'StepsDoc': StepsDoc
+        StepsDoc: StepsDoc,
     },
     methods: {
         nextPage(event) {
-            for (let field in event.formData) {
-                this.formObject[field] = event.formData[field];
-            }
+            this.formObject = { ...this.formObject, ...event.formData };
 
             this.$router.push(this.items[event.pageIndex + 1].to);
         },
@@ -61,10 +69,19 @@ export default {
             this.$router.push(this.items[event.pageIndex - 1].to);
         },
         complete() {
-            this.$toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.'});
-        }
-    }
-}
+            this.$toast.add({
+                severity: "success",
+                summary: "Order submitted",
+                detail:
+                    "Dear, " +
+                    this.formObject.firstname +
+                    " " +
+                    this.formObject.lastname +
+                    " your order completed.",
+            });
+        },
+    },
+};
 </script>
 
 <style scoped lang="scss">
@@ -75,4 +92,4 @@ export default {
 :deep(.p-card-body) {
     padding: 2rem;
 }
-</style>
+</style>