如何使DataTable显示对象属性的值？

Question

我在vue项目中使用Vuestic，我需要显示来自对象中的属性的值，我有如下所示：

myObject: {
  subObject: {
    name
  }
}

我有一个myObject列表，我需要在DataTable中显示subObject的名称。我的DataTable指向headers对象：

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

这有可能吗？

Answer 1

是的，这是绝对可能的。

这个特性直到6月23日的此承诺才被支持。因此，由于vuestic-ui的v1.4.2是在6月24日发布的，所以您可以在键中使用点表示法来检索数据表的嵌套属性。

下面是一个有用的示例：链接。

Answer 2

如果我错了，请纠正我，但听起来您想要从另一个myObject对象数组中创建一个myObject值数组？

你可以用Array.prototype.map来做

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

上面的代码将接受这样一个数组：

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

并退回这个：

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

可以将结果分配给计算属性。我不确定您的label值来自何处，但我确信您可以修改上面的代码以包含它