[Vue] Subitems van geselecteerde item

[TheNephilim]

De meeste dingen zijn erg makkelijk (en snel) te doen in Vue, maar deze wil me niet lukken. Misschien heeft iemand hier een idee over hoe ik dit het beste op de Vue-manier kan oplossen. Zie onderstaande code voorbeeld:

HTML:

<div id="app">    
    <ul>
        <li v-for="book in shelfs[0].books">
            {{ book.title }}
        </li>
    </ul>
</div>

JavaScript:

var app = new Vue({
    el: '#app',
    data: {
        shelfs: [
                {
                selected: true,
                books: [
                    { title: 'Lorem ipum' },
                    { title: 'Dolor sit amet' }
                ]
            },
            {
                selected: false,
                books: [
                    { title: 'Ipsum lorem' },
                    { title: 'Amet sit dolor' }
                ]
            }
        ]
    }
});

Hier haal laat ik de books zien van de eerste shelf in shelfs. Alleen wil ik graag de books laten zien waar shelf.selected === true.

Door de Vue filterBy optie te gebruiken kom ik er niet; dat heeft alleen effect op de uiteindelijke set boeken. Een functie die selected shelf returned heb ik ook al geprobeerd, maar dat vind de v-for statement van Vue weer niet leuk. Wat nu?

JSFiddle: https://jsfiddle.net/vty2a63c/

--- Edit ---

Op dit moment heb ik het zo opgelost:

HTML:

<div id="app">    
    <ul>
        <li v-for="book in shelfs.find(isSelected).books">
            {{ book.title }}
        </li>
    </ul>
</div>

JavaScript:

var app = new Vue({
    el: '#app',
    data: {
        shelfs: [
                {
                selected: true,
                books: [
                    { title: 'Lorem ipum' },
                    { title: 'Dolor sit amet' }
                ]
            },
            {
                selected: false,
                books: [
                    { title: 'Ipsum lorem' },
                    { title: 'Amet sit dolor' }
                ]
            }
        ]
    },

    methods: {
        isSelected: function(element, index, array) {
            return element.selected;
        }
    }
});

JSFiddle: https://jsfiddle.net/vty2a63c/1/

Dit gaat in ieder geval goed bij het ophalen van de data in eerste instantie. Nu even kijken wat dit doet met de two-way binding.

--- Edit 2 ---

Bovenstaande gaat overigens alleen goed als de debug mode uit staat. Ik krijg deze foutmelding: Error when evaluating expression "shelfs.find(isSelected).books.

Mensen die niks met Vue hebben, maar wel met Javascript zijn overigens ook van harte welkom

[ Voor 33% gewijzigd door TheNephilim op 04-02-2016 10:56 ]

[Winst]

Ik ken Vue niet maar ik heb 'm voor je opgelost op een andere manier. Als jij weet waarop je handig vanuit javascript bij het data object komt kan je dat eventueel wat verbeteren.

https://jsfiddle.net/vty2a63c/6/

[ Voor 14% gewijzigd door Winst op 06-02-2016 10:09 ]

[TheNephilim]

Bedankt voor je reactie!

Met behulp van wat 'Vue kenners' heb ik het zo opgelost: https://jsfiddle.net/vty2a63c/3/. Jouw oplossing werkt ook, maar deze is een stukje sneller denk ik doordat je geen for loop gebruikt. De two-way-binding werkt ook nog gewoon.