鍍金池/ 問答/HTML5  PHP  HTML/ vue如何遍歷數(shù)組？

vue如何遍歷數(shù)組？

后臺(tái)給的數(shù)據(jù)如下：

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

問：
如何用vue遍歷數(shù)組，判斷checked是否為true，如果為true則打印對應(yīng)id。
如上面打印的結(jié)果為：[1,11,12]

回答
編輯回答
故人嘆

打印…？還是顯示…？
如果用 console.log() 打印的話就跟 Vue 一點(diǎn)關(guān)系都沒有，就是單純的 js 遍歷。

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

traverse(data)
2018年7月22日 15:30
編輯回答
舊酒館

顯示在頁面上

  <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>
2017年8月10日 17:10
編輯回答
荒城

這，，，不難吧，for循環(huán)，if判斷，然后console

2017年4月24日 00:21
編輯回答
咕嚕嚕
data.map((item, index)=>{
    if(item.checked){
        console.log(item.id)
        item.children.map((subItem, subIndex)=>{
            console.log(subItem.id)
        })
    }
})

用for或foreach都一樣。跟vue沒關(guān)系，就是js。要知道vue只是一個(gè)簡單的js庫。

2017年4月14日 01:37