Vue.js - v-for 仅打印对象名称

Posted

技术标签:

【中文标题】Vue.js - v-for 仅打印对象名称【英文标题】:Vue.js - v-for to print object name only 【发布时间】:2020-06-22 05:16:29 【问题描述】:

我有一个嵌套对象,只想打印对象名称。我如何在 vue.js 中做到这一点?

var object1 = 
  'obj1' : 
    'obj1a' : 'a',
    'obj1b' : 'b'
  ,
  'obj2' : 
    'obj2c' : 'c',
    'obj2d' : 'd'
  

这段代码打印出被迭代对象的全部内容:

<div v-for="obj in object1" v-bind:key="obj">
   obj 
</div>

如何让它只打印字符串obj1obj2

谢谢!

【问题讨论】:

【参考方案1】:

v-for 循环中添加key,index,如v-for="(obj,key,index) in object1"

<div v-for="(obj,key,index) in object1" v-bind:key="obj">
   key 
</div>

【讨论】:

【参考方案2】:

你可以使用v-for="(value, key )v-for 如下

<div v-for="(value, key ) in object1" >
   key 
</div>

【讨论】:

以上是关于Vue.js - v-for 仅打印对象名称的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 2 v-for 循环没有获取数组元素

Vue.js 在 v-for 循环中访问嵌套对象

v-for 在 Vue 上返回空

如何在 Vue.js 中使用 v-for 遍历对象数组?

来自对象键和嵌套数组的 Vue.js v-for 循环

Vue.js - 如何按特定属性对数组中的对象进行排序并使用“v-for”进行渲染