CODEWITHSUNDEEP
vue.js
Steve
Steve

Reputation: 645

Vue styling with a method

I'm trying to style a card with a method called needsApprove

 <v-card @click="displayAmendments(article)" :style="needsApprove(article)? 'background: black;' : ''">
             <h5 class="text-center p-2"
             v-text="article.num + '. ' + article.title">
           </h5>
   </v-card>

Tried compured property:

needsApprove(article) {
       
        article.amendments.forEach(amendment => {
            if(amendment.approved == 0) {
                return true
            }
            else {
                return false
            }
        })
    },

Tried method:

    needsApprove(article) {
            article.amendments.forEach(amendment => {
                if(amendment.approved == 0) {
                    return true
                }
                else {
                    return false
                }
            })
    },

It doesn't seem to work, it does return true although the styling doesn't seem to work, is this kind of thing possible? What am i doing wrong?

Upvotes: 0

Views: 30

Answers (2)

I_Shayderov
I_Shayderov

Reputation: 167

Boussadjra Brahim answered how to fix it but did not explained why it does not work. forEach returns nothing and is used only to make certain action with every element of collection. To return something you can also use 'every' instead of 'some' to make sure that every element of collection satisfies the condition.

Upvotes: 2

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try out a computed property with parameter like :

needsApprove() {
   return articel=>article.amendments.some(am=>am.approved==0)
}

Upvotes: 2

Related Questions