vue如何遍历数组？

Question

后台给的数据如下：

data:[
    {
        id:1,
        name:"用户管理",
        checked:true,
        children:[
            {
                id:11,
                name:"新建用户",
                checked:true
            },
            {
                id:12,
                name:"编辑用户",
                checked:true
            }
        ]
    },
    {
        id:2,
        name:"角色管理",
        checked:false,
    }
]

问：
如何用vue遍历数组，判断checked是否为true，如果为true则打印对应id。
如上面打印的结果为：[1,11,12]

Answer 1

打印…？还是显示…？
如果用 console.log() 打印的话就跟 Vue 一点关系都没有，就是单纯的 js 遍历。

function traverse(array) {
  array.forEach(item => {
    if (item.checked) {
      console.log(item.id)
    }
    if (item.children) {
      traverse(item.children)
    }
  })
}

traverse(data)

Answer 2

显示在页面上

  <div v-for = "(item, index) in data" :key = "item.id">
        {{item.name}}
        <input type = "checkbox" checked = "item.checked">
        <div v-if = "item.checked == true"> {{item.id}}</div>
    </div>

Answer 3

data.map((item, index)=>{
    if(item.checked){
        console.log(item.id)
        item.children.map((subItem, subIndex)=>{
            console.log(subItem.id)
        })
    }
})

用for或foreach都一样。跟vue没关系，就是js。要知道vue只是一个简单的js库。

Answer 4

这，，，不难吧，for循环，if判断，然后console