Creating a nested list using v-repeat and $value about discussion HOT 10 OPEN

Here's a version that works. It seems using identifier with objects causes problems...

Also, when you are iterating over an object of objects, those objects are used directly as the child vm's root $data. In comparison, $value is only available for primitive values.

Basically, v-repeat doesn't play too well when doing nested loops of objects. If you have control over your data structure it might be better to use Arrays where appropriate.

from discussion.

Thanks. This solves the issue. It might worth adding the example to the "Displaying a List" guide on the Vue.js website.

from discussion.

this is golden! Thanks

from discussion.

An updated sample: http://jsfiddle.net/8WqxC/2/

On this data:

var playlists =  {
    "Favourite Songs": {
        "2014": ['song a', 'song b'],
        "2013": ['song c', 'song d', 'song e']
    },
    "Favourite Genres": {
        "Pop": ['song a'],
        "Rock": ['song b'],
        "Hip Hop": ['song c', 'song d', 'song e']
    }
}

With this markup:

<ul id="menu">
    <li v-repeat="playlist : playlists">
        {{$key}}
        <ul>
            <li v-repeat="sublist : playlist">
                {{$key}}
                <ul>
                    <li v-repeat="sublist">
                        {{$value}}
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

from discussion.

@tiffon Thanks a lot 👍

from discussion.

Just started using vue-js, and I wonder if this method is deprecated in favor of v-for?
Is this how you should do it in 1.0?

http://jsfiddle.net/z7mrmx1a/

from discussion.

@mattiasottosson yes, v-repeat is deprecated in favor of v-for. There's also syntax for manually specifying key: v-for="(key, value) in object" and v-for="(index, value) in list".

We also don't use vuejs/Discussion anymore. You can find help on the forum or gitter chat.

from discussion.

@simplesmiler isn't it actually v-for="(value, key) in object and v-for="(value, index) in list" ? That is to say, isn't the value the first parameter? (counterintuitive though it is)

https://vuejs.org/v2/api/#v-for

from discussion.

@DelightedD0D please note the date, this was before 2.0.

from discussion.

@simplesmiler fair enough :)

from discussion.