如何将iTunes REST API数据接入Bootstrap Vue表格及分页组件

你遇到的核心问题是错误地在<b-table>组件上使用了v-for，这导致每个表格实例只接收到单个对象，最终无法解析并显示[Object Object]。Bootstrap Vue的<b-table>本身就支持直接绑定数组数据源，不需要额外的循环渲染。

问题根源拆解 #

你原来的表格代码：

<b-table id="my-table" v-for="(result, index) in result" :key="index" :fields="fields" :per-page="perPage" :current-page="currentPage" small ></b-table>

这里的v-for会遍历result数组，为每个元素生成一个独立的<b-table>，但每个表格默认会把当前遍历的单个对象当作数据源，而表格组件需要的是数组，因此无法正确解析，最终显示[Object Object]。

而你用普通v-for渲染div能正常工作，是因为你直接访问了对象的具体属性，没有依赖表格组件的自动数据解析逻辑。

解决方案 #

只需要移除<b-table>上的v-for，通过:items属性直接绑定result数组即可，分页相关配置保持不变：

修正后的表格代码 #

<div class="overflow-auto">
 <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table" ></b-pagination>
 <p class="mt-3">Current Page: {{ currentPage }}</p>
 <!-- 移除v-for，添加:items绑定数据源 -->
 <b-table id="my-table" :items="result" :fields="fields" :per-page="perPage" :current-page="currentPage" small ></b-table>
</div>

关键修改点 #

• 删掉<b-table>上的v-for和:key属性，避免重复渲染表格
• 添加:items="result"，明确告诉表格要渲染的数据源是你的result数组
• 保留原有的fields、per-page、current-page等配置，这些都是正确的分页和列映射设置

进阶：自定义表格列（可选） #

如果需要实现和你手动渲染div一样的效果（比如显示专辑封面、添加按钮），可以用Bootstrap Vue的作用域插槽自定义列内容：

首先更新fields配置，添加需要自定义的列：

fields: [
  { key: "artworkUrl100", label: "Album Cover" },
  { key: "artistName", label: "Artist" },
  { key: "collectionName", label: "Song Title" },
  { key: "actions", label: "Actions" }
],

然后修改表格代码，添加自定义插槽：

<b-table id="my-table" :items="result" :fields="fields" :per-page="perPage" :current-page="currentPage" small >
  <!-- 自定义专辑封面列 -->
  <template #cell(artworkUrl100)="data">
    <img :src="resizeArtworkUrl(data.item)" alt="Album Cover" class="album-cover align-self-start mr-3" />
  </template>
  <!-- 自定义添加按钮列 -->
  <template #cell(actions)="data">
    <button type="button" class="btn btn-primary btn-sm" @click="addItem(data.item)" :disabled="data.item.disableButton">
      <font-awesome-icon icon="plus"/>
    </button>
  </template>
</b-table>

这样既能利用Bootstrap Vue表格的分页功能，又能实现和之前手动渲染一致的UI效果。

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