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>

    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


    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