Incorporate a 'back' button in the tab content of vue-form-wizard

Currently, I'm working on implementing a vue form wizard from the repository: https://github.com/BinarCode/vue-form-wizard

My challenge is to include a button in the second tab-content itself instead of having it placed in the footer.

I attempted the following code snippet but unfortunately, it did not produce the desired outcome:

<tab-content title="second tab">
    <button @click="previousTab">Take me back to the previous tab</button>
</tab-content>

Could someone provide guidance on how to correctly insert a previous button within the content of my second tab in StepForm.vue?

javascriptvue.js

Answer №1

To make the FormWizard work, simply assign it a ref. Then utilize that ref to interact with the FormWizard, and within the button's click event, invoke the prevTab() function of the FormWizard

 <form-wizard @on-complete="onComplete" 
                      shape="square"
                      color="#3498db" ref="formWiz">
            <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
              <div>
              <button @click="goBack">GO BACK !</button>
              </div>
            </tab-content>
            <tab-content title="Last step"
                         icon="ti-check">
              Yuhuuu! This seems pretty darn simple
            </tab-content>
</form-wizard>

Vue.use(VueFormWizard)
new Vue({
  el: '#app',
  methods: {
    onComplete: function() {
      alert('Hooray. Finished!');
    },
    goBack() {
      this.$refs.formWiz.prevTab()
    }
  }
})

Fiddle

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

Successfully running npm update on a Mac seemed to have updated the package, however, the

I needed to upgrade my npm version using the following command: npm install npm@latest -g After running the above command, I encountered the following output: /Users/ariful.haque/.npm-global/bin/npm -> /Users/ariful.haque/.npm-global/lib/node_modules ...

javascriptnode.jsnpm

Retrieving JSON data from an API

As a beginner with Jquery JSON and API's, I am trying to work on hitting an API that returns city names in JSON format. I need to display these city names dynamically on my webpage in a list format. Can someone guide me through this process? If you w ...

javascriptjqueryjson

Refreshable div element in a Code Igniter-powered web application

I am encountering difficulties with automatically refreshing my div using the CodeIgniter framework. My goal in the code snippet below is to have the particular div with id="lot_info" refresh every 1 second. The div is not refreshing, and an error message ...

javascriptphpjquerycodeignitermodel-view-controller

Exploring ways to integrate Javascript and CSS into a Bootstrap lightbox modal dialog?

Can someone help me figure out how to use the bootstrap lightbox to display a form with specific CSS style and JavaScript code for the form? I'm having some trouble implementing it. I specifically need this setup because I am using Selectize.JS to cr ...

javascriptjquerycsstwitter-bootstraplightbox

Please refrain from displaying the POST response in Express

I have a simple Express API setup: app.get('/example', function(req, res) { if (req.body.messageid == 1) { res.send({message: "Message"}); } } The API returns a message to be displayed on an HTML page. To display the message, I created ...

javascriptjqueryajaxnode.jsexpress

Controlling numerous websockets using React

I am currently developing a single-page application using React.js with a JSON RPC 2.0 backend API that relies on websockets. Managing multiple websocket connections simultaneously across different React.js components has been a challenge. Initially, I th ...

javascriptreactjstypescriptwebsocketsingle-page-application

Utilizing Packery.js in AngularJS

Having some trouble trying to integrate Packery.js with my angularjs app. It seems like they are not working well together. I tried setting isInitLayout to false, but no luck. This is the (bootstrap 3) HTML code I am using: <div class="row" class="js ...

javascriptangularjstwitter-bootstrappackery

Incorporating a vuejs component within another for enhanced functionality

Within my app.js file, I have the following code: import MenuItem from './components/MenuItem.vue' import NavMenu from './components/NavMenu.vue' new Vue({ el: '#app', components: { 'nav-menu' : NavMe ...

vue.js

Creating HTML input elements dynamically using Javascript

<body> <form action="insertquestion.php" method="POST"> <script> function generateInputs(){ var prefix = "answer"; var number = 1; for(var i = 0; i < 5; i++){ ...

javascripthtml

The child component is not updating the v-model prop array of the parent component

In my current project, I have a main component called cms-custom-editor: <template> <div id="cms-custom-editor" class="cms-custom-editor"> <cms-editor-toolbar v-model:toggles="state.toggles"/> <d ...

javascriptvue.jsvuejs3v-modelvue-reactivity

Using the fetch/await functions, objects are able to be created inside a loop

In my NEXTJS project, I am attempting to create an object that traverses all domains and their pages to build a structure containing the site name and page URL. This is required for dynamic paging within the getStaticPaths function. Despite what I believe ...

javascriptnext.jsasync-await

UI not updating correctly due to computed property across multiple tabs

I rely on vuex for managing state and authenticating users using firebase To maintain state persistence, I utilize vuex-persisted state to store data in cookies Within my vuex store, I handle user data (such as username and login status) as demonstrated b ...

vue.jsvuejs2vuex

In Javascript, create a variable that dynamically updates for every child element

While this might appear to be a simple question, it has been troubling me for some time now. Let me elaborate on what I am trying to accomplish. I have a collection of images in a gallery, and my goal is to center each image vertically within its contain ...

javascriptjqueryhtmlcss

Adjust the attributes of v-data-table

I am working with a v-data-table and I need to create a method that can change the attribute "loading" to false within the method. Can anyone provide guidance on how to accomplish this? <v-layout fluid v-resize="onResize" child-flex> <v-da ...

vue.jsvuetify.jsv-data-table

Navigate within a JSON object using an identifier to extract a particular value associated with that identifier

Exploring a JSON object containing nested arrays and objects. The label value acts as the identifier to find and return its corresponding level's metrics value. If the label is located at the second level, retrieve and return the metrics from that lev ...

javascriptarraysjsonobject

The journey of data starting from a PHP file, moving through JavaScript, and circling back to PHP

I've encountered an interesting challenge with my PHP file and Wordpress shortcode. It all starts when the shortcode is embedded in a webpage, triggering a php function from within the file. This function executes an SQL query to extract data, then s ...

javascriptphp

Upon running `vue create project`, an error with code EINTEGRITY was encountered in npm

Every time I try to create a new project with vue create project, I encounter the following error: npm ERR! code EINTEGRITY npm ERR! Verification failed while extracting node-notifier@^5.4.2: npm ERR! Verification failed while extracting node-notifier@^5.4 ...

node.jsvue.jsnpmnpm-installvue-cli

The IntroJs step is only partially visible on the screen

Currently, I am incorporating introJS into my application and encountering an issue where one of the steps is only partially visible on the screen. Despite trying various position settings such as auto, left, right, etc., this particular item consistentl ...

javascripthtmlcssionic-frameworkintro.js

Utilizing a dynamically created Stripe checkout button

Currently, I am attempting to integrate a checkout button from the Stripe Dashboard into my VueJS Project. I have a feeling that I might not be approaching this in the correct manner, so if you have any advice, I would greatly appreciate it. In order to ...

javascriptvue.jsstripe-paymentswebstormclient-side

"Implementing interactive arrow buttons in a horizontal navigation bar using HTML, CSS, and JavaScript

Seeking advice on creating a horizontal navigation bar with arrow buttons at the sides, such as the one shown below. Despite extensive research, I have not found the exact solution I am looking for. This will be implemented in my Vue.js project. |<| P ...

javascripthtmlcssvue.jsuser-interface