v-for ：除了 Vuejs 中的“Object.keys(obj)[0]”之外，有没有办法获取嵌套（第二）循环的键？

Question

这是标记：

<ul>
<li v-for="(topic,label,index) in guides" :key="index">
  <ul> 
    <strong> {{label}} </strong>
    <li v-for="rule in topic"> 
        {{rule.val}},
        {{Object.keys(topic)[0]}}
    </li>
  </ul>
</li>

这是此列表的数据：

data: {

guides: {

 "CSS" : {
    1502983185472 : {
      "modifiedby" : "bkokot",
      "val" : "When adding new rule, use classes instead of ID whenever possible"
    },
    1502983192513 : {
      "modifiedby" : "bkokot",
      "val" : "Some other rule"
    },
  },
  "Other" : {
    1502628612513 : {
      "modifiedby" : "dleon",
      "val" : "Some test text"
    },
    1502982934236 : {
      "modifiedby" : "bkokot",
      "val" : "Another version of text"
    },
  }

  }
}

所以正如你所看到的，有一个“guides”属性，它是其他对象的对象，这些对象也有内部对象。我想要的只是从内部（第二个）循环（数字“1502983185472”等）中获取密钥。我现在看到的唯一解决方案是“Object.keys(topic)[0]”，但是在 vuejs 中是否有更准确的替代方案？将键、索引参数添加到第二个循环（使用新的唯一变量名称）对我不起作用。

这是一个工作小提琴：https : //jsfiddle.net/thyla/yeuahvkc/1/

请分享您的想法。如果对此没有好的解决方案 - 它可能是 Vuejs 存储库中功能请求的一个很好的主题（除非我在这里遗漏了一些可怕的东西）？一般来说，如果你很好奇 - 这个数字是一个 momentjs 时间戳 - 我在 firebase 中使用这些数据，并将初始时间戳保存为对象键似乎是一个非常好的解决方案（因为我们无论如何都需要一个键，以节省一些空间- 我可以在我的对象中使用这个键而不是另一个额外的时间戳属性，这也使实例在 firebase 中非常“可定位”）。

先感谢您 ！干杯!

ps：另一种可能的解决方案是将内部循环（css、other）从对象转换为数组并使用时间戳作为另一个对象属性，但我使用的是 firebase - 将此数据保存为对象使我能够快速访问某些实例无需解析整个父对象/数组，就可以更轻松地过滤、搜索、重新更新等 - 因此将对象转换为数组并不是一个好的解决方案，例如对于大量项目。

Answer 1

您的小提琴为该主题中的每个规则呈现该主题的第一个条目的数字键。我假设您想实际显示每个相应规则的数字键。

该值作为 中的第二个参数传递v-for：

<li v-for="(rule, ruleID) in topic"> 
   {{ rule.val }},
   {{ ruleID }}
</li>

这是一个工作小提琴。

这是有关v-for与对象一起使用的文档。