Help creating a q-stepper with v-for

[lucasmediaflow]

Hi everyone!

I'm wondering if you could help me out with an issue i'm stuck with.

I'm trying to create a stepper dynamically from a list of products coming from vuex.

When I try the example in the documentation, hard coding the steps in, it all works well.

But when I try to generate the same steps dynamically with a v-for based on that list, the stepper doesn't display correctly anymore.

It seems to display as if it had the vertical prop set, but it doesn't.

Like in this image:

This is how it looks hard coding each step manually:

And this is my code at the moment:

<template>
  <q-layout view="hHh lpR fFf">
    <q-page-container>
      <div>
        <q-stepper v-for="(prod, idx) in productsList" :key="idx + 1" v-model="step" color="primary" :flat="darkMode">

          <q-step :name="idx + 1" :title="'index'+idx" :done="step > idx + 1" >

            <div>
              content goes here
            </div>

            <q-stepper-navigation>
              <q-btn @click="() => { step = (idx+1) + 1 }" label="continue" color="primary"></q-btn>
              <q-btn flat v-if="step > 1" @click="() => { step = (idx+1) - 1 }" label="back"></q-btn>
            </q-stepper-navigation>

          </q-step>

        </q-stepper>

      </div>
    </q-page-container>
  </q-layout>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { apiCaller } from '../js/utils.js'

export default {
  name: "MainLayout",
  data() {
    return {
      step: 1,
      darkMode: false,
    };
  },
  methods: {
    ...mapActions(["setProductsList"])
  },
  computed: {
    ...mapGetters({ productsList: "getProductsList"})
  },
  mounted() {
    this.$q.dark.set(this.darkMode);
    this.setProductsList()
},
};
</script>

Would you know what am I doing wrong? Could you point me in the right direction maybe?

Thank you very much in advance. Cheers!

[JayeshLab]

You need to place v-for in q-step instead of q-stepper, so that it will loop steps

[lucasmediaflow]

@JayeshLab Wow mate! So simple!

The only one thing I didn't try...

Thank you very much mate!

Cheers!