Vue.js 如何访问数组的键和数据并显示它？

我想显示产品的名称，并使用阵列的名称来显示我的产品。我有像样的数据集，不想重做它

我想在路由器链接中使用此标记

{{ productName }}
{{ productID }}

以下是我的vue开发工具的显示方式：

products: Array[2]

    0: Object
        1337: Object
            changed: "2019-08-29 13:36:18"
            name: Product1
    1: Object
        2222: Object
            changed: "2019-08-29 13:45:48"
            name: Product2

我有一个计算属性，但在中仅显示“0”或“1”对象，该对象具有我想要的名称

  computed: {
    productName(){
      return Object.keys(this.products)[0];
    }
  }

如果单击链接，我希望我的routerlink链接到1337或2222。

---

但是我想显示名称，因此Product1或Product2

下面是一个工作示例，它使用计算属性来重新格式化

产品

数组：

Vue.config.devtools=false；
Vue.config.productionTip=false；
新Vue({
el:“#应用程序”，
数据（）{
返回{
产品：[{
1337: {
名称：“产品1”
}
}, {
2222: {
名称：“产品2”
}
}],
};
},
计算：{
simpleProducts（）{
返回此.products.map（p=>({
id:Object.keys（p）[0]，
名称：Object.values（p）[0]。名称，
}));
},
},
})

{{product.id}
{{product.name}