How can I enable step-by-step functionality in Vue.js?

I am trying to set the default option to: Additional Info, instead of: Personal details

I have looked everywhere for documentation on this but cannot find any. Can someone please assist me with this? Thank you.

https://jsfiddle.net/bt5dhqtf/98/

<div id="app">
<div>
    <form-wizard @on-complete="onComplete" 
                  shape="square"
                      color="#3498db">
        <tab-content title="Personal details"
                     icon="ti-user">
          My first tab content
        </tab-content>
        <tab-content title="Additional Info"
                     icon="ti-settings">
          My second tab content
        </tab-content>
        <tab-content title="Last step"
                     icon="ti-check">
          Yuhuuu! This seems pretty damn simple
        </tab-content>
    </form-wizard>
</div>
</div>

//

Vue.use(VueFormWizard)
new Vue({
 el: '#app',
 methods: {
  onComplete: function(){
      alert('Yay. Done!');
   }
  }
})

https://i.sstatic.net/Q2jfC.jpg

javascriptvue.js

Answer №1

To specify the default selected tab, make use of the start-index attribute

:start-index="1"

Refer to the example link provided below

https://jsfiddle.net/1z9mfp7y/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Balanced arrangement of components

As I work on my first electron app, I've created the initial layout. My goal is to have elements resize when the user adjusts the window size: The red part should change in both width and height The blue part should only adjust in height, not width ...

javascripthtmlcssreactjselectron

Having trouble with your jQuery animation on a div?

Check out this jsFiddle example: http://jsfiddle.net/uM68j/ After clicking on one of the links in the demo, the bar is supposed to smoothly slide to the top. However, instead of animating, it immediately jumps to the top. How can I modify the code to ac ...

javascriptjquerycssjquery-animate

What is the process for submitting a post request with custom fields to the Wordpress rest api?

Currently, I am attempting to make a post request to /wp-json/wp/v2/posts while also including custom fields. However, it seems that although the request field is successfully being sent, the custom fields are not updating with the data I am trying to send ...

javascriptphpajaxxmlhttprequestwordpress-rest-api

What causes the accordion class to activate panels with varying names?

Why are some of my accordions triggering other accordions when they have different names? I've been working on resolving the issue where opening the second accordion in the second, third, or fourth panel closes the second accordion in the first panel ...

javascripthtmlcsstwitter-bootstrap-3

Creating a specialized Angular directive for handling input of positive numbers

I am working on an application that requires a text field to only accept positive integers (no decimals, no negatives). The user should be restricted to entering values between 1 and 9999. <input type="text" min="0" max="99" number-mask=""> While s ...

javascriptvalidationangularjsdirective

Angular navigation is inconsistent in its functionality

Currently, my Angular project consists of four components: home, portfolio, contact, and about. While I can navigate from the home page to any other component using the nav-bar, I am restricted to navigating only back to the home page when on any other pag ...

javascripthtmlcssangulartypescript

The function cannot be applied to the size of the map within the action payload

Is there a way to replace the for loop with the map method? The data structure for book.pages is in the format [{},{},{}] I tried using the size method and included this line console.log("book.pages.map.size();--->", book.pages.map.si ...

javascripthtmlreactjsloopsredux

The function $.post(...) is failing to detect the JSON content in the

I am attempting to send a POST request to the server using the following code: var body = { PatientAgeFilter: { CompareOperator: parseInt(self.patientAge()), MoreThanVal: { AgeSpecifier: 0, AgeValue: parseInt(se ...

javascriptjqueryasp.net-mvcjsonknockout.js

Unexpected behavior observed when using React useEffect

useEffect(() => { const method = methodsToRun[0]; let results = []; if (method) { let paramsTypes = method[1].map(param => param[0][2]); let runAlgo = window.wasm.cwrap(method[0], 'string', paramsTypes); //this is em ...

javascriptreactjs

Is React invoking a function?

Just starting out with React and experimenting with lists. Not sure why my code isn't working as expected - when I call the method, it just shows plain HTML. I've already tried wrapping it in <Liste /> tags, but that didn't help eithe ...

javascripthtmlreactjslistvisual-studio

Looking for nested objects within an array in JavaScript

Currently, I am dealing with a REST API that provides data in the following format: students = [{ batch_id: 22 id: 1 image: null name: "a new batch student", attendance: [ { id: 1, student_id: 1, batch_id: 22, absent_on: "2019-09-15", ti ...

javascriptangular

Adding event listeners for elements inside slots in Vue.js: A step-by-step guide

I need to create a unique vue component called "characters-counter" that can accurately count the characters in input elements, as shown below: <characters-counter v-slot =" {charactersCount} "> <div>{{ charactersCount }} Chars< ...

vue.jsvuejs3

What is the method to assign a value to ng-class in Angularjs?

I need to categorize items in a list by assigning them classes such as items-count-1, items-count-2, items-count-3, items-count-4, based on the total number of items present. This is how I would like it to appear: li(ng-repeat="area in areas", ng-class=" ...

javascripthtmlangularjs

What is the most efficient way to combine several properties of the same element within an array?

I am working with an array containing personal information such as names and ages. My goal is to create a new property for each element in the array by combining certain properties together. Here is the initial array: var list = [{name: "James", ...

javascriptarrays

The perplexing behavior of RxJS Observables with Mongo Cursors

Recently, I've been working on converting a mongo cursor into an observable using my own RxJS implementation. Despite finding numerous solutions online, I wanted to challenge myself by creating one from scratch. I would greatly appreciate it if someo ...

javascripttypescriptrxjsobservabledatabase-cursor

Steps for clearing a set of checkboxes when a different checkbox is selected

While working on a website I'm developing, I encountered an issue with the search function I created. The search function includes a list of categories that users can select or deselect to filter items. This feature is very similar to how Coursera has ...

javascripthtmldomwebcheckbox

Keep the starting input value stored in Vue.js

In my child component, I am rendering a prop that contains the student ID. I have displayed this value in an input element with the initial value set to the student ID. https://i.sstatic.net/Q2NO7.jpg <form @submit.prevent="insertScore"> <td ...

laravelvue.jsinputaxios

document.getElementById is functioning properly for one form element, but encountering issues with another

I'm currently working on a webpage that requires a 10-digit code to be split between two textboxes, with 4 characters in the first textbox and 6 characters in the second. My goal is to use Javascript to make the cursor automatically jump to the secon ...

javascriptasp.net

Showcasing pictures with a prominent large image accompanied by two smaller ones on the right side

In my use of Material-ui-next, I am attempting to create images in a specific layout. ------ --------- | | | | 2 | | | | 1 |---| | | | | 3 | ------ --------- I have encountered some unusual issues. 1 - 3 appears below 1 ...

javascriptcssflexboxmaterial-ui

Cypress: Uncovering the method invoked by a button click

I'm currently utilizing Vue3 with Vite and Cypress. My Vue3 component utilizes the script setup SFC syntax. Below is the code snippet for my component: <template> <div> <button data-cy="testBtn" @click="btnClick()&q ...

javascripttypescriptvue.jscypresscypress-component-test-runner