How to user mdb-stepper with custom objects list ?


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

GuillaumeDgr asked 2 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">
      <template>...</template>
    </div>
  </mdb-stepper>

How to do this please ? Thanks a lot


Magdalena Dembna staff premium answered 2 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">{{ object.name }}</div>
      </template>
    </mdb-stepper>

Best regards, Magdalena


GuillaumeDgr commented 2 years ago

It works perfectly ! Thanks a lot Magdalena ;)


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) {
    this.$refs[`vertical${step}`].classList.add("was-validated");

    if (step === 1 && this.name.length > 0)

      this.validatedSteps[1] = true;

    else if (step === 2 && this.surname.length > 0)
      this.validatedSteps[2] = true;
  },
  submit() {
    console.log(`${this.name} 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 premium commented 2 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


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: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.0
  • Device: Mac Book Pro
  • Browser: Firefox dev
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No