data-kt-stepper-action="step" not working
data-kt-stepper-action="step" not working in vue
<div class="stepper-nav py-5">
<!--begin::Step 1-->
<div
class="stepper-item current"
data-kt-stepper-element="nav"
data-kt-stepper-action="step"
>
<h3 class="stepper-title">Account Type
</div>
<!--end::Step 1-->
<!--begin::Step 2-->
<div
class="stepper-item"
data-kt-stepper-element="nav"
data-kt-stepper-action="step"
>
<h3 class="stepper-title">Account Info
</div>
<!--end::Step 2-->
<!--begin::Step 3-->
<div
class="stepper-item"
data-kt-stepper-element="nav"
data-kt-stepper-action="step"
>
<h3 class="stepper-title">Business Details
</div>
<!--end::Step 3-->
<!--begin::Step 4-->
<div
class="stepper-item"
data-kt-stepper-element="nav"
data-kt-stepper-action="step"
>
<h3 class="stepper-title">Billing Details
</div>
<!--end::Step 4-->
<!--begin::Step 5-->
<div
class="stepper-item"
data-kt-stepper-element="nav"
data-kt-stepper-action="step"
>
<h3 class="stepper-title">Completed
</div>
<!--end::Step 5-->
</div>onMounted(() => {
_stepperObj.value = StepperComponent.createInsance(
createAccountRef.value as HTMLElement
);
setupStepperEventHandlers(_stepperObj.value);
});
const setupStepperEventHandlers = (stepper) => {
// Handle navigation click
stepper.on("kt.stepper.click", () => {
stepper.goTo(stepper.getClickedStepIndex()); // Go to clicked step
});
// Handle next step
stepper.on("kt.stepper.next", () => {
console.log(3);
stepper.goNext(); // Go to next step
});
// Handle previous step
stepper.on("kt.stepper.previous", () => {
console.log(4);
stepper.goPrevious(); // Go to previous step
});
};
Replies (7)
The attribute data-kt-stepper-action="step" is commonly used in web development frameworks like Bootstrap or custom JavaScript implementations to trigger a specific action, such as moving to the next step in a bloxd io component.
Look like is _StepperComponent.ts not working
(this.steps[i] as HTMLElement) === this.element
Hi,
Thank you for reaching out to us.
Could you please specify which Metronic version you are using?
Do you have any errors in your console?
You can refer to the stepper example in file src/components/wizards/create-account-wizard/CreateAccountHorizontalWizardStepper.vue.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Im using vuejs demo 1 8.2.0. no console errors and I did not find file src/components/wizards/create-account-wizard/CreateAccountHorizontalWizardStepper.vue
I checked is this condition not match dont know why
(this.steps[i] as HTMLElement) === this.elementHi,
This file should exist in every demo, did you delete any folders from the default Metronic package?
You can refer to the stepper example in file src/components/wizards/create-account-wizard/CreateAccountHorizontalWizardStepper.vue, this file has a working stepper example you can reuse this component and modify it's content for your needs.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I have try all demo put data-kt-stepper-action="step" between data-kt-stepper-element="nav" still not clickable navigation
<div class="stepper-nav py-5 mt-5">
<!--begin::Step 1-->
<div
class="stepper-item current"
data-kt-stepper-element="nav"
data-kt-stepper-action="step"
>
<h3 class="stepper-title">Account Type
</div>
<!--end::Step 1-->
<!--begin::Step 2-->
<div
class="stepper-item"
data-kt-stepper-element="nav"
data-kt-stepper-action="step"
>
<h3 class="stepper-title">Account Info
</div>
<!--end::Step 2-->
<!--begin::Step 3-->
<div
class="stepper-item"
data-kt-stepper-element="nav"
data-kt-stepper-action="step"
>
<h3 class="stepper-title">Business Info
</div>
<!--end::Step 3-->
<!--begin::Step 4-->
<div
class="stepper-item"
data-kt-stepper-element="nav"
data-kt-stepper-action="step"
>
<h3 class="stepper-title">Billing Details
</div>
<!--end::Step 4-->
<!--begin::Step 5-->
<div
class="stepper-item"
data-kt-stepper-element="nav"
data-kt-stepper-action="step"
>
<h3 class="stepper-title">Completed
</div>
<!--end::Step 5-->
</div>
This is what i did:
in StepperComponent
DOMEventHandlerUtil.on(
this.element,
'[data-kt-stepper-element="nav"]',
"click",
(e: Event) => {
e.preventDefault();
// Encuentra el elemento más cercano que tenga el atributo deseado.
const stepElement = (e.target as HTMLElement).closest('[data-kt-stepper-element="nav"]') as HTMLElement;
if (!stepElement) return;
const index = Array.from(this.steps).indexOf(stepElement) + 1;
if (index) {
this._goTo(index);
}
}
);
works for me 
