Creating a table in vuetify with v-data-iterator passing an object from an api-CodePudding

After a full day of searching and testing, here I am. I first tried to do a simple Row with 2 columns table and iterate on the object to fill the left column with the it's keys, but couldn't find how to do the same with the value of the keys for the second column. I then found out the existance of v-data-iterator which does exactly just that! But then as the title implies, I get an error since I'm feeding it an object instead of an array. I get that! But I tried many work-arounds with no avail, like this example where wherever I put it I get an error of some sort:

const exception= { producer: 'John', director: 'Jane', assistant: 'Peter' }; //my obj
const arr = Object.entries(exception); //my obj in array

Here is an example of an object my api returns: https://i.stack.imgur.com/ar11w.png At this point I'm pretty sure that I'm simply missing a little something somewhere... Here is my actual (non working) code:

<template>
  <div>
    <v-container fluid>
      <v-data-iterator :items="exception" hide-default-footer>
        <template v-slot:header>
          <v-toolbar  color="indigo darken-5" dark flat>
            <v-toolbar-title>{{ exception.exceptionName }}</v-toolbar-title>
          </v-toolbar>
        </template>

        <template v-slot:default="props">
          <v-row>
            <v-col
              v-for="item in props.items"
              :key="item.exceptionName"
              cols="12"
              sm="6"
              md="4"
              lg="3"
            >
              <v-card>
                <v-card-title >
                  {{ exception.exceptionName }}
                </v-card-title>

                <v-divider></v-divider>

                <v-list dense>
                  <v-list-item>
                    <v-list-item-content>Calories:</v-list-item-content>
                    <v-list-item-content >
                      {{ item.exceptionId }}
                    </v-list-item-content>
                  </v-list-item>

                      ... Other keys and values

                </v-list>
              </v-card>
            </v-col>
          </v-row>
        </template>
      </v-data-iterator>
    </v-container>
  </div>
</template>

<script>
import Axios from "axios";

export default {
  name: "UniqueException",
  data() {
    return {
      exception: [], //the object
    };
  },

  mounted() {
    Axios.get("https://localhost:7121/api/exceptions/"   this.$route.params.id)
      .then((answ) => {
        this.exception = answ.data; //copy of the api object and pastes it in the object "exception"
        console.log(answ.data);
      })
      .catch((error) => {
        console.warn(error);
      });
  },
};
</script>```

CodePudding user response：

You could convert that object into an array of objects like so

const exception= { producer: 'John', director: 'Jane', assistant: 'Peter' }; //my obj
const asArray = Object.entries(exception).map(([position, name]) => ({position, name}));
console.log(asArray);

Now you have an array of Objects in the form {position, name}