I'm adding q-scroll-area to existing content that works. When I add the q-scroll area, the conditional formatting of v-if does not work (either if I wrap the div with q-scroll-area or wrap it the other way). I want the div element to appear and be scrollable only on v-if show.

    <div @click="show = !show">button</div>
    <div v-if="show">
    <q-scroll-area>Lorem ipsum dolor sit amet, consectetur adipiscing 
    elit.  
    </q-scroll-area>
    </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

In Quasar docs, they set a fixed height to <q-scroll-area> for vertical content. Seems that q-scroll-area has a height of 0 by default.

<div @click="show = !show">button</div>
  <div v-if="show">
    <q-scroll-area style="height: 200px; max-width: 300px;">Lorem ipsum dolor sit amet, consectetur adipiscing 
    elit.  
    </q-scroll-area>
  </div>