Vue+TypeScript页面加载时根据API返回结果控制div显示隐藏如何实现？

DevOps 小满

2026-10-2

问题解决方案

核心问题梳理

不可直接修改@Prop装饰的变量：Vue单向数据流规范要求子组件不能直接修改父组件传递的Prop，否则会触发运行时警告
数组对比逻辑错误：数组是引用类型，this.File !== ['']的对比逻辑永远成立，因为两个独立数组的内存地址不同，无法通过全等/不全等判断内容是否一致
缺少类属性声明：this.File没有提前声明类型，不符合TypeScript语法规范
缺少生命周期调用：init方法没有绑定到组件加载生命周期，不会自动执行

调整后代码

模板部分（原有逻辑可直接保留）

<div class="row" v-if="!isHidden">
  <p>
    Your file is available!
  </p>
</div>

TypeScript逻辑部分

@Component
export default class File extends Vue {
  // 若不需要父组件控制显隐，直接把isHidden改为组件内部响应式变量即可
  private isHidden: boolean = true
  // 提前声明File属性的类型，对应接口返回的字符串数组
  private File: string[] = []

  // 组件挂载时自动执行初始化逻辑
  private async mounted(): Promise<void> {
    await this.init()
  }

  private async init(): Promise<void> {
    this.File = []
    this.isHidden = true

    // 加空值兜底，避免接口返回非数组导致后续判断报错
    this.File = await API.file.downloadFile() ?? []
  
    // 可根据实际需求选判断逻辑：
    // 1、只要数组长度大于0就显示：if (this.File.length > 0)
    // 2、排除仅包含空字符串的特殊场景，用下方判断
    if (!(this.File.length === 1 && this.File[0] === '')) {
      this.isHidden = false
    }
  }
}