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:

    <template>
      <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'>
          <q-expansion-item
            expand-separator
            icon="perm_identity"
            label="Profile"
            caption="John Doe"
          >
            <q-card class='accounts-list-details'>
              <q-card-section>
                <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>
                </div>
              </q-card-section>
            </q-card>
    
          </q-expansion-item>
    
        </q-list>
      </div>
    </template>
    

    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