Topic: How to user mdb-stepper with custom objects list ?

GuillaumeDgr premium asked 4 years ago

Expected behavior I'm trying to display a mdb-stepper with custom length depending of custom objects list size.

Actual behavior Error : "this.$refs.stepContent is undefined"

Resources (screenshots, code snippets etc.) I'm trying to do this :

<mdb-stepper simpleV :steps="objects.length" buttons validation>
    <div v-bind:key="index" v-for="(object, index) in objects">

How to do this please ? Thanks a lot

GuillaumeDgr premium answered 4 years ago

I still have two problems with this mdb-stepper :

  • Error displaying when trying to make this stepper with validation :

Error in mounted hook: "TypeError: this.$refs.stepContent is undefined"

I'm using this code :

validate(step) {

    if (step === 1 && > 0)

      this.validatedSteps[1] = true;

    else if (step === 2 && this.surname.length > 0)
      this.validatedSteps[2] = true;
  submit() {
    console.log(`${} has submitted the form.s`);
  • First item not showing properly (see screenshot) : enter image description here

Could you please help me ? thks a lot

Magdalena Dembna staff commented 4 years ago

The problem is actually caused by the data being fetched later - stepper needs to get the step's height in the mounted hook. We didn't anticipate dynamic usage of this component - I'm adding this to our task list. I suspect that the second issue is caused by wrongly calculated height in the mounted hook. We'll include the fix in the upcoming release. Kind regards, Magdalena

Magdalena Dembna staff answered 4 years ago

Each step needs to be represented with its own template - so this is the element you have to use v-for on - although it cannot be keyed, so in the example below we are binding the key value to the div inside:

    <mdb-stepper simpleV :steps="objects.length" buttons>
      <template v-for="(object, index) in objects" #[index+1]>
        <div :key="index">{{ }}</div>

Best regards, Magdalena

GuillaumeDgr premium commented 4 years ago

It works perfectly ! Thanks a lot Magdalena ;)

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 6.7.0
  • Device: Mac Book Pro
  • Browser: Firefox dev
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No