在Vuetify数据表格中处理Axios API响应的问题

咱们先来拆解下你遇到的问题：

• 手动写HTML表格能正常展示，是因为Vue的v-for支持遍历对象的属性值，当你用v-for="(item, n) in info"遍历response.data.bpi这个对象时，它会自动把对象里的每个值（比如USD、GBP对应的汇率对象）拿出来循环渲染。
• 但Vuetify的v-data-table组件对:items属性有严格要求——必须是数组类型，所以当你传入bpi这个Object时，组件内部调用数组的map方法就会报错：TypeError: this.items.map is not a function，这完全符合你推测的“数据类型不匹配”问题。

核心解决方案：把Object转换成Array #

你调用的CoinDesk API返回的bpi是一个键值对对象，结构大概是这样的：

{
  "USD": { "symbol": "$", "rate": "5,247.0417", ... },
  "GBP": { "symbol": "£", "rate": "4,235.1234", ... },
  "EUR": { "symbol": "€", "rate": "4,890.5678", ... }
}

我们需要把这个对象转换成数组，这里提供两种常用方式：

方式1：仅提取对象值（无需保留USD/GBP这类代码） #

修改mounted里的Axios回调逻辑：

mounted() {
  axios
    .get('https://api.coindesk.com/v1/bpi/currentprice.json')
    .then(response => {
      // 把bpi对象的所有值提取为数组
      this.info = Object.values(response.data.bpi)
    })
    .catch(error => console.error(error))
}

方式2：保留代码并整合到数组项（更贴合你的静态数据结构） #

如果希望每个表格项都包含code字段（比如USD、GBP），可以用Object.entries拆分键值对再重组：

mounted() {
  axios
    .get('https://api.coindesk.com/v1/bpi/currentprice.json')
    .then(response => {
      // 遍历键值对，把code字段加入每个对象后组成数组
      this.info = Object.entries(response.data.bpi).map(([code, itemData]) => ({
        code,
        ...itemData // 展开原有属性：symbol、rate、description等
      }))
    })
    .catch(error => console.error(error))
}

修改后this.info就变成了标准数组，完全满足v-data-table的要求，报错会消失，表格也能正常渲染了。

另外补充：你的静态数据staticitems是数组结构，所以组件能正常工作，这也验证了我们的结论——数据类型匹配是核心关键。

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