使用q-scroll-area时v-if失效 如何实现div按需展示且内容可滚动

• 第一步先确认响应式变量声明正确
  非响应式变量变更不会触发视图更新，是最常见的失效原因：
  Vue3组合式API需用ref声明变量：

  import { ref } from 'vue'
  const show = ref(false)
  

  Vue2/选项式API需在data中声明：

  export default {
    data() {
      return {
        show: false
      }
    }
  }
  

• 第二步给滚动区域设置明确高度
  q-scroll-area依赖父元素或自身的明确高度计算滚动区域，未设置高度会导致内容渲染异常，看起来和v-if失效表现一致，修改示例代码如下：

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

• 第三步强制组件重渲染
  如果上述步骤无效，说明是q-scroll-area组件缓存导致的渲染异常，给组件绑定动态key，每次v-if状态变更时强制组件重新初始化即可：

  <div @click="show = !show">切换按钮</div>
  <div v-if="show" style="height: 200px;">
    <q-scroll-area :key="`scroll-area-${show}`">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </q-scroll-area>
  </div>
  

内容的提问来源于stack exchange，提问作者jdost_26