Question

0

215

Views

Vuetify v-data-table add complex data

i am working on v-data-table. I couldn't figure out how to process the information from the backend. Could you help?

i tried this code but i get vue.runtime.esm.js:1897 TypeError: this.items.slice is not a function

<v-data-table :headers="headers" :items="products" class="elevation-1" :search="search">
  <template slot="item" slot-scope="props">
    <tr>
      <td>{{ props.item.id }}</td>
      <td class="text-xs-right">{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.id }}</td>
      <td class="text-xs-right">{{ props.item.category}}</td>
....
            <v-btn icon class="mx-0" @click="editItem(props.item)">
          <v-icon class="mx-0 primary--text white--text">edit</v-icon>
        </v-btn>
        <v-btn icon class="mx-0" @click="deleteItem(props.item)">
          <v-icon class="mx-0 red--text white--text">delete</v-icon>
        </v-btn>
      </td>
    </tr>
  </template>

data from api

{
   "items": [
       {
          "name":"test",
          "id":1,
          "category":"test"
       }
   ],
}

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T05:52:07.052Z

The data you receive from the API is stored in the items array

data(){
  return {
    items: []

If that is the case then you will need to do this:

v-data-table :items="items"

and not products like you have above.

Docs

0

215

Vuetify v-data-table add complex data

1 answers

0

Find remote jobs

Andres GPT