How to Vuestic DataTable displays values from properties of objects?

Alexandre Heinen 0
Viewed 25

I'm using Vuestic in my vue project and I need to display values from a property that is in a object, I have something like this:

myObject: {
  subObject: {
    name
  }
}

I have a list of myObject and I need to display the name of the subObject in the DataTable. My DataTable is pointing to headers object:

headers: [
  { key: 'subObject.name', label: 'Name' }
]

Is that possible?

vuestic-admin vuestic vuejs3 vue.js
1 Answers

Correct me if I'm wrong but it sounds like you would like to create an array of myObject.subObject.name values from another array of myObject objects?

You can do that with Array.prototype.map:

myObjectArray.map((obj) => {
  return {
    key: obj.subObject.name,
  };
});

the above code would take an array like this:

myObjectArray = [
  { subObject: { name: "a" } },
  { subObject: { name: "b" } },
  { subObject: { name: "c" } },
]

and return this:

[
  { key: "a" },
  { key: "b" },
  { key: "c" },
]

you could assign the result to a computed property. I'm not sure where your label values comes from but I'm sure you could modify the above code to include it

yoduh0
Related