vue.js - v-代表 : is there a way to get the key for the nested(second) loop besides "Object.keys(obj)[0]" in Vuejs?

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”等)获取 key 。 我现在看到的唯一解决方案是“Object.keys(topic)[0]”，但是在 vuejs 中是否有更准确的替代方案？ 将键、索引参数添加到第二个循环(具有新的唯一变量名称)对我不起作用。

这是一个工作 fiddle :https://jsfiddle.net/thyla/yeuahvkc/1/

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

提前致谢!干杯!

p.s:另一种可能的解决方案是将内部循环(css，其他)从对象转换为数组并使用时间戳作为另一个对象属性，但我使用的是 firebase - 将此数据保存为对象使我能够快速在不解析整个父对象/数组的情况下访问某些实例，使其更容易过滤、搜索、重新更新等 - 因此将对象转换为数组不是一个很好的解决方案，例如有大量项目。

Answer 1

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

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

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

Here's a working fiddle.

Here's the documentation on using v-for with an object.