Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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
});
};


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


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.


Deleted comment
Deleted comment

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.element



Hi,

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>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(