Iterate over the stepper headers and insert separators between each item, but exclude the final item

Utilizing the stepper component, I have implemented a dynamic approach by looping through an array of objects instead of hardcoding the headers and content.

The stepper items are functioning perfectly with:

<v-stepper-items>
  <v-stepper-content
    v-for="(step, stepIndex) in steps"
    :key="stepIndex"
    :step="stepIndex"
  >
    <component :is="step.content"/>
  </v-stepper-content>
</v-stepper-items>

However, handling the headers is proving to be challenging. I want to insert a divider component between the headers without wrapping them in a container, as this causes CSS issues. Additionally, the last header should not have a divider.

<v-stepper-header>
  <v-container v-for="(step, stepIndex) in steps" :key="stepIndex">
    <v-stepper-step :complete="currentStep > stepIndex" :step="stepIndex">
      {{step.header}}
    </v-stepper-step>
    <v-divider :v-if="stepIndex < steps.length - 1"></v-divider>
  </v-container>
</v-stepper-header>

I am seeking a solution on how to loop through these stepper headers without affecting the CSS layout.

Update

A demo showcasing the CSS issue can be found below. The use of the v-container is causing problems.

https://codepen.io/pdntspa/pen/ZEYOZOP?editors=1010

javascriptvue.jsvuetify.js

Answer №1

Implement a template tag like 

<template v-for="(header, index) in headers">
. The template tag remains invisible in HTML and does not impact your layout. You can also include another template tag enclosing the entire section with a v-if condition if necessary.

HTML :

<div id="app">
  <v-app id="inspire">
    <v-stepper v-model="e1">
      <v-stepper-header>
        <template v-for="(header, index) in headers">
          <v-stepper-step :step="index + 1">{{ header }}</v-stepper-step>
          <v-divider v-if="index < headers.length - 1"/>
        </template>
      </v-stepper-header>
      <v-stepper-items>
        <v-stepper-content step="1">
          <v-card
            class="mb-12"
            color="grey lighten-1"
            height="200px"
          ></v-card>
          <v-btn
            color="primary"
            @click="e1 = 2"
          >
            Continue
          </v-btn>
          <v-btn text>Cancel</v-btn>
        </v-stepper-content>
        <v-stepper-content step="2">
          <v-card
            class="mb-12"
            color="grey lighten-1"
            height="200px"
          ></v-card>
          <v-btn
            color="primary"
            @click="e1 = 3"
          >
            Continue
          </v-btn>
          <v-btn text>Cancel</v-btn>
        </v-stepper-content>

        <v-stepper-content step="3">
          <v-card
            class="mb-12"
            color="grey lighten-1"
            height="200px"
          ></v-card>
          <v-btn
            color="primary"
            @click="e1 = 1"
          >
            Continue
          </v-btn>
          <v-btn text>Cancel</v-btn>
        </v-stepper-content>
      </v-stepper-items>
    </v-stepper>
  </v-app>
</div>

JS : 

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      e1: 0,
      headers: [
        'Step 1',
        'Step 2',
        'Step 3',
        'Step 4'
      ]
    }
  },
})

Check out this variation of your codepen too.

Please note that your <v-divider> condition wasn't functioning properly because of the unnecessary colon before your v-if : :v-if

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

Unexplained quirks observed in AngularJS $watch during the initialization of a controller

I am working with a code snippet that utilizes AngularJS: var app = angular.module('Demo', []); app.controller('DemoCtrl', function ($scope) { function notify(newValue, oldValue) { console.log('%s => %s', oldValue, ...

javascriptangularjs

The power of Rails unleashed through Ajax Remote Javascript

Trying to locate Employees who are engaged in multiple Job roles, I have set up three select boxes that dynamically adjust their options. The problem arises when my CoffeeScript file only triggers once. After the initial selection and rendering of the part ...

javascriptjqueryruby-on-railsajaxcoffeescript

View the picture directly on this page

Currently, I am in the process of creating a gallery and I would like the images to open on top of everything in their original size when clicked by the user. My expertise lies in HTML and CSS at the moment, but I am open to learning JavaScript and jQuery ...

javascriptjqueryhtmlcss

What is the correct way to apply styles universally instead of using "*" as a selector?

With Nextron, I was able to successfully run my code, but upon opening the window, I noticed that the body tag had a margin of 8px. Although I managed to change this using the dev tools, I am unsure how to permanently apply this change in my code. When att ...

javascriptcssnext.jselectron

What is the best way to attach to the beforeSubmit event of a dynamically loaded AJAX form in Yii?

Recently, I encountered an issue with dynamically loading a form via AJAX and attempting to bind the beforeSubmit event. Strangely, the event didn't seem to work as expected, causing the form to submit and the browser to navigate to a new page. This b ...

javascriptjqueryajaxyii2

Bringing in States and Functions to a React Component

Is there a way to improve the organization of states and functions within a functional React Component? Here's my current code structure: import React from 'react' //more imports... const Dashboard = () => { const [] = useState() / ...

javascriptreactjsimportreact-hooksstate

Is a Singleton really necessary for my situation?

I am currently developing a Firefox extension that requires keeping multiple windows synchronized with the same information. The toolbar in each window queries a remote server periodically, but since Firefox windows are isolated environments with their own ...

javascriptdesign-patternssingletonfirefox-addon

Nuxt.js: Unique transitions for every route

Currently, I am enjoying my experience with Nuxt.js and have been implementing transitions for each page I create. However, I am facing a challenge. I would like to trigger a specific transition when navigating from an archive to a page. For instance: Wit ...

javascriptjqueryvue.jstransitionnuxt.js

Using Node.js to dissect a nested JSON array into individual JSON objects

Seeking guidance on how to efficiently parse nested arrays into separate objects using Node.js. Your assistance would be greatly appreciated. I aim to exclude the following from the final output- "Status": "0", "Message": "OK", "Count": "3724", AND I w ...

javascriptjsonnode.js

Exploring how to utilize optional URL parameters within Express.js

When using Express.js version 4.14, I implemented the following route: app.get('/show/:name/:surname?/:address?/:id/:phone?', function(req, res) { res.json({ name: req.params.name, surname: req.params.surname, address ...

javascriptnode.jsexpress

Loop through a collection of object arrays within a JavaScript context

Upon loading my HTML page, the following information is displayed: id: country url: http://data:8004/v1/entity/country name: countries description: All the countries in the world id: states url: http://data:8004/v1/entity/states name: states data descrip ...

javascriptarraysnested-loops

Utilize Element UI autocomplete to transfer data into a VueJS-powered table's input fields

I am currently working on designing an invoice form using the Element UI framework. I have successfully integrated an autocomplete feature that retrieves data from the loadAll array. Upon clicking the add button and selecting an item_name from the autocomp ...

vue.jselement-ui

Webster Barron code script

I'm attempting to replicate the concept of this video https://www.superhi.com/video/barron-webster using text, but I am encountering difficulties in achieving the desired effect. The design text is currently overlapping my name and displaying in rev ...

javascripthtmlcss

A method for retrieving the variables from the initial API function for use in a subsequent API function

$.getJSON(url, function (data) { $.getJSON(url_wind, function (data2) { //perform actions with 'data' and 'data2' }); }); While attempting to use the data from the initial getJSON() call in the second getJSON() call ...

javascript

Troubleshooting Bootstrap: Navigation bar toggling causes JS functions to malfunction

My JS function is no longer working when the responsive website's breakpoint of 768px is activated (specifically, the nav var toggle/collapse). This is causing the problem where the JS function stops working. The HTML code in question is: <div cl ...

javascriptjquerytwitter-bootstrapnavbar

Tips for sending content-filled components to GridItem within Vue-grid-layout:

Can someone please explain how to pass content to GridItems from the hash value of Layout []? I understand that GridItem.i is a key value for GridItem. But I'm unsure how to link the "content" component to a cell accordingly. The following approach ...

vue.jsgrid-layoutvuejs2vue-component

Verify the presence of blank space with javaScript

I currently have a text box on my website. <input type="text" name="FirstName" value="Mickey"> My goal is to prevent the user from entering empty spaces, tabs, or new lines in the text box. However, I want to allow spaces between characters. Does a ...

javascripthtml

Discovering the scrollTop Value Following Dom Alteration

I'm currently developing a mobile application that uses AJAX to dynamically load pages based on Framework7. However, I've encountered an issue where my function for changing the header's color is not working anymore due to the dynamic loadin ...

javascriptjqueryhtml-framework-7

Monitoring data updates within an Angular directive

Is there a way to activate a $watch variable in an Angular directive when modifying the data within it (eg. adding or removing data), without assigning a completely new object to that variable? Currently, I am loading a basic dataset from a JSON file usin ...

javascriptangularjsangularjs-directive

Switching the default port for a Vue.js application running in a Docker container

I am currently in the process of changing the default port for a Vue.js app running on docker. I have experimented with both examples provided in the official documentation, which can be found here. For instance, I have a Dockerfile using http-server: FR ...

dockervue.jsdocker-compose