[Vuejs]-Advice on how to go about splitting a form into multiple "pages"/"tabs" in Vue?

0👍

You could do something like this:

// router.js
const vueRoutes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
(...)
  {
    path: '/wizard',  // Define main route for the form
    name: 'wizard',
    component: AppWizard,
    children: [
      {
        path: 'page1',
        name: 'page1',
        component: FormPart1, // If the route is '/wizard/page1' it will render the FormPart1 component
      },
      {
        path: 'page2',
        name: 'page2',
        component: FormPart2, // If the route is '/wizard/page2' it will render the FormPart2 component
      }
    ],
  },
(...)
]

// AppWizard.vue
<template>
  <my-wizard>
    <form>
      <router-view>
    </form>
  </my-wizard>
</template>

// FormPart1.vue
<template>
  <fieldset>
    <label1/>
    <input1>
    <label2/>
    <input2>
  </fieldset>
</template>


// FormPart2.vue
<template>
  <fieldset>
    <label3/>
    <input3>
    <label4/>
    <input4>
  </fieldset>
</template>

Of course, you are free to replace wizard/page1 with pages/1 or whatever.

Leave a comment