CODEWITHSUNDEEP
vue.jsvuejs2
user1469734
user1469734

Reputation: 801

Binding class in Vue2 with method

I'm new to Vue2 and have some trouble with binding a class based on an output of a function:

<ul v-for="sheep in sheeps">
    // sheep.listing = ['b', 'e', 'f'];
    // partners = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']
    <li v-for="foobar in partners" :class="{ done: hasPartnered(sheep.listing, foobar.name) }">
        <span v-text="foobar.name"></span>
    </li>
</ul>

In the example: sheep listed 3 letters from the 9 partners, so 3 times a true and the rest a false return..

With this Method:

hasPartnered(listing, partner) {
    if(listing) {
        listing.forEach(function(el) {
            if(el == partner) {
                return true;
            }
        });
    }
    return false;
},

It always returns true;. So probably it's not the correct way of binding a class in Vue?

Upvotes: 0

Views: 982

Answers (1)

Decade Moon
Decade Moon

Reputation: 34286

You can't return a value from hasPartnered from inside the function you pass to forEach.

Try this:

hasPartnered(listing, partner) {
  return listing && listing.indexOf(partner) !== -1;
}

Upvotes: 1

Related Questions