Use v-for in Sub Object Vuejs

Question

Use v-for in Sub Object Vuejs

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

How could an element of this array of objects be displayed?

export default {
name: 'app',
data () {
    return {
        items: [
            {
                message: 'Foo',
                submenus: [
                    {
                        item_submenu: '01',
                        item_submenu: '02'
                    }
                ]
            },
            { 
                message: 'Bar' 
            }
        ]
    }
}
}

I tried to show it like this and the item_submenu do not appear

#app
    nav
        ul
            li(v-for="item in items") {{ item.message }} - {{ item.submenus }}
        ul
            li(v-for="submenu in items.submenus") {{ submenu.item_submenu }}

vue.js

asked by ztvmark 18.02.2017 в 05:48

source

2 answers

How can I read a zig zag matrix starting from the secondary diagonal? Build json with several arrays

score 1 · Answer 1

You have an indentation error. Pug interprets spaces / tabs as Python; if one element is inside (indented) of another, it means that it is your child. In your case, you have both tags ul at the same level , causing submenu not available in the second list.

#app
  ul
    li(v-for="item in items")
      |{{ item.message }}
      ul
        li(v-for="submenu in item.submenus")
          |{{ submenu.item_submenu }}

score 0 · Answer 2

I already solved the array was wrong and also the identacion

    export default {
    name: 'app',
    data () {
        return {
            items: [
                {
                    message: 'Foo',
                    submenus: [
                        {
                            item_submenu: '01',
                        },
                        { 
                            item_submenu: '02' 
                        }
                    ]
                },
                { 
                    message: 'Bar' 
                }
            ]
        }
    }
}

And in the template

#app
    ul
        li(v-for="item in items")
            |{{ item.message }}
            ul
                li(v-for="submenu in item.submenus")
                    |{{ submenu.item_submenu }}