How to user mdb-stepper with custom objects list ?

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

How to do this please ? Thanks a lot

Add comment

GuillaumeDgr premium answered 4 years ago

0 0 Best answer

I still have two problems with this mdb-stepper :

<ul>
<li>Error displaying when trying to make this stepper with validation : </li>
</ul>

<blockquote>
 Error in mounted hook: "TypeError: this.$refs.stepContent is undefined"
</blockquote>

I'm using this code :

<pre class="prettyprint"><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`);
 }
</code></pre>

<ul>
<li>First item not showing properly (see screenshot) :
<img src="https://usercontent.mdbootstrap.com/mdb-images/support/5f8c6436-00a4-4ba7-9ca7-a226b722f1d7-Capture%20d%E2%80%99e%CC%81cran%202020-04-17%20a%CC%80%2010.48.36.jpg" alt="enter image description here" title=""></li>
</ul>

Could you please help me ? thks a lot

Please insert min. 20 characters.

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) :

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

Add comment

Magdalena Dembna staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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 premium commented 4 years ago

It works perfectly ! Thanks a lot Magdalena ;)

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

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

GuillaumeDgr

Premium support 205Support score
30Questions 6Answers 0Snippets