Vuetify的v-app-bar内按钮可隐藏但无法重新显示问题求助

1. showTDT变量未做响应式声明：Vue的视图更新依赖响应式状态，如果你没有在初始化时就声明该变量（Vue2未在data中定义，Vue3未用ref/reactive包裹），后续修改变量值不会触发视图重渲染。
2. v-if绑定位置不合理：你当前将v-if写在了v-btn标签上，外层v-tooltip组件的activator插槽存在缓存逻辑，当内部按钮销毁后再重建时，v-tooltip不会主动重新渲染插槽内容，导致按钮不显示。

• 首先确认showTDT的响应式声明
  Vue2项目确认在data中提前初始化变量：

  export default {
    data() {
      return {
        // 必须提前在data中声明，不能后续动态挂载到实例上
        showTDT: false,
        showModel: false
      }
    }
  }
  

  Vue3项目确认用ref包裹变量：

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

• 调整v-if的绑定位置，将判断逻辑移到v-tooltip标签上，整个Tooltip组件跟随showTDT的状态销毁/重建，避免插槽缓存问题：

  <v-tooltip bottom v-if="showTDT">
    <template v-slot:activator="{ on, attrs }">
      <v-btn
        @click="showModel = true"
        icon
        class="mx-2 white--text"
        v-bind="attrs"
        v-on="on"
      >
        <v-icon>mdi-rotate-3d</v-icon>
      </v-btn>
    </template>
    <span>3D Tour</span>
  </v-tooltip>
  

• 如果你需要保留Tooltip的其他逻辑不想销毁整个组件，可以把v-if替换为v-show，仅控制组件的显示隐藏，不会触发组件销毁重建，也能解决渲染问题。

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