Topic: MDB 6 - Updated Stepper

londoh pro asked 3 years ago


I have a complex form within a stepper using 5.8.3.

In order to avoid a long unwieldy component I've broken the form down into separate form components as per the (simplified) snippet included here. This has worked well.

I feel I should probably update 5.8.3 to 6. at this point, but am concerned about the stepper. I haven't really looked in depth at rewriting it yet, but I wondered if devs/anyone has any advice to update stepper to 6.0.0 and specifically re continuing to use my existing form partials, or using some other method of breaking the form into separate files.

Thank you.

Resources (screenshots, code snippets etc.)

<stepper
    buttons
    within
    :submit-function="onSubmit"
    next-btn="Next Step"
    prev-btn="Previous"
    submit-btn="Submit Entry"
    validation
    :validatedSteps="validatedSteps"
    @validate="validate"
>
<mdb-step
        slot="content"
        name="User Details"
        icon="user"
        :number="1"
>
    <step-user
            :form="form"
            title="User Details"
        />
</mdb-step>

<mdb-step
        slot="content"
        name="Address"
        icon="building"
        :number="2"
>
    <step-address
            :form="form"
            :counties="this.getCounties"
            title="Address"
    />
</mdb-step>


londoh pro answered 3 years ago


Hi @Magdalena Dembna

thanks very much for your detailed input.

So I'll upgrade to 6 and refactor my stepper. I'll post here again if any more questions.


Magdalena Dembna staff answered 3 years ago


Take a look at within example: https://mdbootstrap.com/docs/vue/components/stepper/#within . First, what you need to do it add :steps="2" property - it will create the given number of named slots. If you want to add name field, use the array instead of number (:steps="[{name: "Step 1"}, {name: Step2}]"). Then, replace mdb-step with the template tag corresponding to the named slot (f.e <template #1> YOUR CONTENT </template> will be the first step, #2 the second, etc). You no longer have to pass a function as a property - component emits submit event. Customizing buttons (text, colour) goes through options object. You can find more details about all available options in the API tab (Stepper Within). As for using your custom components within the stepper - just nest them between template tags. Kind regards, Magdalena



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.8.3
  • Device: any
  • Browser: all
  • OS: n/a
  • Provided sample code: No
  • Provided link: No