Stepper fails to render dynamically

[ilabutk]

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!

[rstoenescu]

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).

[ilabutk]

Super! Thanks!! Cannot wait v0.14!