vue.js - 如何通过索引将数据放入 v-data-table 中？

Question

我是 vue 的新手，我试图使用 axios 来处理来自 rest api 的数据来发出请求，但是我的数据是作为对象或承诺来的，我尝试了很多东西但没有用

数据以 JSON 格式出现，如下所示：

{“AglomeradosSubnormais2010_Limites.sld”：“ http://api/styles/AglomeradosSubnormais2010_Limites.sld ”，“AglomeradosSubnormais2010_Limites.xml”：“ http://api/styles/AglomeradosSubnormais2010_Limites.xml ”，

"Agricultura_Irrigada.sld": " http://api/styles/ccar/Agricultura_Irrigada.sld ", ... }

<template>
  <v-container fluid fill-height>
    <v-card height='100%'>
      <v-data-table
        :headers="headers"
        :items="styleList"
        class="elevation-1"
      >
        <template v-slot:index="props">
          <td>{{ props.index }}</td>
          <td class="justify-center layout px-0">
            <v-icon class="mr-2" @click="editItem(props.item)">
              remove_red_eye
            </v-icon>
            <v-icon @click="deleteItem(props.item)">
              get_app
            </v-icon>
          </td>
        </template>
        <template v-slot:no-data>
          <v-alert :value="true" color="error" icon="warning">
            Error
          </v-alert>
          <v-btn color="primary" @click="search">Atualizar</v-btn>
        </template>
      </v-data-table>
    </v-card>
  </v-container>
</template>

data() {
      return {
        styleList: [],
      }
}
computed: {
      async search() {
          const response = await this.request('url') 
          this.styleList = response.data
          return this.styleList
       }
    },

然后我得到了很多操作系统错误：

[Vue 警告]：无效的道具：道具“项目”的类型检查失败。预期数组，得到对象

[Vue 警告]：观察者“项目”的回调错误：“TypeError：this.items.map 不是函数”

[Vue 警告]：渲染错误：“TypeError：this.items.slice 不是函数”

TypeError：this.items.slice 不是函数

标签： vue.jsaxios