Binding class in Vue2 with method

Question

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?

Decade Moon · Accepted Answer · 2017-07-13 11:58:18Z

1

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;
}

answered Jul 13, 2017 at 11:58

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Binding class in Vue2 with method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related