Stepper fails to render dynamically



  • I want to create a q-stepper. It works fine when I have static data like this:

    items: [
    {“description”: “step1”}, {“description”: “step3”}, {“description”: “step3”}
    ],

    <q-transition name=“slide”>
    <q-stepper @finish=“finish()” ref=“stepper” v-show="!finished">
    <template v-for=“item in items”>
    <q-step title=“Question”>
    <p class=“caption”>{{item.description}}</p>
    </q-step>
    </template>
    </q-stepper>
    </q-transition>

    However, if I need to fetch “items” from a database, like below. It won’t render correctly! It will show “finish” at Step 3 instead of Step 4.

    mounted () {
    this.getItems ()
    },

    methods: {
    getItems () {
    this.items = [
    {“description”: “step1”}, {“description”: “step3”}, {“description”: “step3”}, {“description”: “step4”} // demo data. Assume from a database.
    ],
    }
    }

    The worse thing is that if I initiate items like [] at the data section, nothing will show up after I fetch the items data! It shows all is finished and you won’t see any items. I had to “initiate” the items with the number of items I fetch. For example, if I have 4 items in the database, I had to use items = [{}, {},{},{}} at the data section! It seems that the q-stepper is somehow rendered before the items are fetched.

    Any help is appreciated!


  • Admin

    Hi,

    In v0.14 your case is already covered, but until the release which is 2 weeks away, try to fetch data before rendering the stepper (v-if).



  • Super! Thanks!! Cannot wait v0.14!


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.