加载页面时隐藏文本

Question

我试图在页面加载时隐藏一个 div。每当页面加载时，我希望某些文本根据 API 调用的结果显示或消失。

请原谅这个菜鸟问题，我是 TypeScript 和 Vue 的新手。

我的代码如下所示：

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

虽然我的 TypeScript 看起来像这样：

@Component
export default class File extends Vue {

  @Prop()
  private isHidden: boolean;

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

    this.File = await API.file.downloadFile(
    );
  
    if (this.File !== ['']) {
      this.isHidden = false;
    }

上面的 TypeScript 在页面加载时调用 API。每当this.File 没有返回空的String[] 时，我该怎么做才能显示文本？

Answer 1

如果你使用 vuex，你可以在你的 vue 组件的数据部分或你的状态中创建一个新属性。

调用 api 时，将新属性设置为“正在加载”。当api返回数据时，如果是有效数据，将你的属性设置为'valid'，如果是无效的，设置为'invalid'。您可以将其他字符串用于其他情况。然后，您可以根据属性中的字符串更改消息，或者根据需要隐藏数据。