Yeah, I have some gaps in my knowledge. I’ll do the course because I agree that’s a more efficient path. Thank you again.

OMG, that was the simplest solution to any question I’ve ever had. Thank you!

OK, that resolves that problem. For my continuing education, I still feel I should learn more about how events work, e.g., hide ([evt]) => void 0 . Do you know of any codepens or concrete examples of how to use events like that?

In this codepen, I have a list of expansion items and only one should be open at any given time. I’m not sure how to accomplish this, but I have some initial thoughts:

• I should use refs to target each expansion item.
• Based on the expansion item docs, I should probably use hide ([evt]) => void 0 method to detect when a new expansion item is opened and then somehow capture that event and write a method function like the following:

closeItems(ref) {
if (!ref) {
 some logic to close all other items here....
  }
}

However, I’m not sure how to put it all together yet. I understand how to use refs, but I’m not yet very clear about how to use events with Quasar components. I’ve been searching, but I don’t see any clear examples.

Can somebody please point me to a good example for this task and/or update my codepen to show me how to make all other items close when an item opens?

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!

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.

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

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:

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:

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?

Thank you for asking. I mean a select tag.

This does not seem to work on select boxes. Has anybody been able to disable the ripple on select boxes?

Hi, sorry, I didn’t see this until now. Thank you for your reply.

I think it’s Electron packager based on the output of the build process that I just performed. (It’s not clear from quasar.confi.js which build tool it’s using.)

However, I just executed the first build for this project and noticed that the icons work when I actually execute a build for the project, but they don’t work when I launch the electron project in dev mode. Is that the way it’s supposed to work?

At least now I know that the icons will be fine when I distribute the software. So, I guess it’s not a big deal if I have to stare at the default icon during development.