Expansion Item: Prevent Unnecessary Re-Render

Julia

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?

metalsadman

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

Julia

Here it is: https://codepen.io/julia5/pen/KLEWrb

Julia

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.

lucasfernog

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

Julia

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!

lucasfernog

LOL i have no idea why that happened

No More Posting New Topics!

Expansion Item: Prevent Unnecessary Re-Render