Topic: How to user mdb-stepper with custom objects list ?
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
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
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 premium 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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