如何按索引将数据处理到v-data-table中?

时间:2019-06-03 19:14:37

标签: vue.js axios

我是vue的新手,我试图使用axios来处理来自REST API的数据以发出请求,但是我将数据作为对象或Promise来了,我尝试了很多东西但没有用

数据像这样以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警告]:道具无效:道具“ items”的类型检查失败。预期的数组,得到对象

[Vue警告]:监视者“ items”的回调错误:“ TypeError:this.items.map不是函数”

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

TypeError:this.items.slice不是函数

0 个答案:

没有答案