如何在 TypeScript 和 Vue.js 中显示来自 API 响应的数组

Question

请原谅我的菜鸟问题，因为我对此很陌生。 我有一个 Axios GET API 调用，如下所示：

  async getFileList(id: string, year: number, month: number): Promise<any> {
    try {
        const link = await http.get('/item/list/links', {
            params: {
                id: id,
                year,
                month,
            },
        });
        if (typeof link.data !== 'object') {
            throw new Error('Failed to get the list of links.');
        }

        return [link.data];
    } catch (error) {
        return [''];
    }
  },

这将返回以下内容：

{
    "month": "October",
    "year": 2021,
    "list": [
        "link2",
        "link2"
    ]
}

这些链接是 AWS Presigned URL 链接。 我想在 UI 中将它们显示为项目符号列表。

function 调用在 TypeScript 中如下所示：

  private async showfileList(): Promise<void> {
    const [list] = await API.Files.getFileList(
      this.id,
      this.dateList.getFullYear(),
      this.date.getMonth() + 1
    );
    
    this.link = list.reports;
  }

我将如何 go 在 Vue 中显示这个？

谢谢！

Answer 1

你可以 V-for 列表渲染

<ul>
  <li v-for="item in link" :key="item">
    {{ item }}
  </li>
</ul>

这可能会有所帮助： https://vuejs.org/v2/guide/list.html