Expansion Item: Prevent Unnecessary Re-Render

  • Hi All. I have a v-for-generated list of expansion items. Each expansion item contains a child item with several input boxes. This list of expansion items displays fine as you can see here:
    alt text
    And each item can be toggled as expected.

    However, the moment I type anything into the expansion child item input boxes, the entire list of expansion items disappears and gets replaced with just one item as you can see here:

    alt text

    The code is very simple, which is based almost purely on the demo code in the Quasar docs:

      <div class="q-pa-md" style="max-width: 400px">
        <q-list bordered class='rounded-borders' v-model='sample_accounts' v-for='account in sample_accounts' v-bind:key='account.id'>
            caption="John Doe"
            <q-card class='accounts-list-details'>
                <div class='row'>
                  <div class='col-3'><input  type='text' ></div>
                  <div class='col-7'><input  type='text' ></div>
                  <div class='col-2'><input type='button' value='Submit'></div>

    My initial hunch was that it is somehow related to this re-rendering issue, but even when there is no v-model attached to the input boxes, the entire expansion component gets re-rendered when anything is typed into the input boxes. So, it seems there is some kind of logic specifically in Quasar’s expansion item component that re-renders the entire DOM even when it’s not necessary.

    Can somebody please help me figure out how to prevent the entire expansion list from re-rendering so that all the expansion items remain visible even when the input boxes are receiving text?

  • better if you provide a replication of your issue via codepen.

  • I’m not sure if this unnecessary re-render issue is a bug or a feature, but it has totally blocked me from moving forward with my project. Hopefully somebody has a solution.

  • @Julia if you remove that v-model from the QList, it gets fixed. QList component doesn’t have the model prop. Also, its better to use the v-for in the QExpansionItem instead of the QList.

  • That’s really great. Now I know: If a component doesn’t accept a v-model prop, it will self-destructive. Thank you for your help!

  • LOL i have no idea why that happened

Log in to reply