如何在 JavaScript/Vue v-for 循环中从对象本身获取 JSON 对象的密钥？

Question

我不是在寻找这个对象包含的键，而是对象本身的键（包含该对象的数组中的键）。

我有这个 JSON：

{
    "Object name (text)": {
        "raw": "Some more text.",
    },
    "Another name": {
        "raw": "Some other text.",
    }
}

并且想为第一个项目获取“对象名称（文本）”。

我的 Vue 代码是：

<CustomComponent
    v-for="object in objects"
    :key="getKey(object)"
    :object="object"
/>

我不确定 getKey 方法是否旨在获取唯一标识符以遍历 JSON 数组。目前它的代码是：

getKey(object) {
   return Object.keys(object)[0];
}

现在我想以某种方式将对象的名称传递给 CustomComponent（在第一种情况下为“对象名称（文本）”）。

在找到更合适的方法之前，我打算使用的一个临时解决方法是从对象数组中获取键，如下所示： :objectName="getObjectName(object)" 和 itemNumber: -1 在数据和这个方法中：

getObjectName(object) {
   this.itemNumber = this.itemNumber + 1;
   var objectName = Object.keys(this.objects)[this.itemNumber];
   console.log("Object name: ", objectName);
}

但是，此方法的第一行导致它运行数百次而不是仅运行两次（为什么会这样？；它在该方法的前 2 次执行以及注释掉该行时有效），我认为这是不太可能是简单地检索对象名称/键的正确方法。

将上述代码放入更有意义的 getKey 方法时它也不起作用（在创建单独的方法进行调试之前，我在该方法中拥有代码）。然后可以使用this.$vnode.key 在组件中访问该键，但是它一直未定义。这可能是一个单独的问题，即使它也可以在这里解决这个问题——我可能会为它创建一个新问题。它输入方法“getKey”和“getObjectName”各 6 次，即使它只在页面上呈现两个项目，就像它应该的那样。

-> 如何在 JavaScript 中获取 JSON 对象的键？
（最好在使用 Vue 循环遍历 JSON 数组后从对象本身获取，而不是仅通过检查对象数组间接进行。）

编辑：作为一种解决方法，我现在已经这样做了：

var keys = Object.keys(this.objects);
    keys.forEach(element => {
      this.objectsWithKeys.push({
        object: this.objects[element],
        key: element
      });
    });

<CustomComponent
   v-for="objectWithKeys in objectsWithKeys"
   :key="objectWithKeys.key"
   :object="objectWithKeys.object"
>
</CustomComponent>

this.$vnode.key

Answer 1

这个解决了，我用var objectsWithKeys = data[Object.keys(data)];和{{ $vnode.key }}。