v-bind class not changing css on object properties

Question

I'm trying to dynamically change some css on some buttons based on object props in a list, here is my data im rendering out below, I'm trying to follow the docs and my setup seems fine but I must be missing something https://v2.vuejs.org/v2/guide/class-and-style.html hoping someone can point it out :) many thanks

 invoices:[
        {id: 0, number: 123, amount:"$1,235", status:"open", isOpen:true, isUnpaid:false},
        {id: 1, number: 123, amount:"$1,235", status:"unpaid", isOpen:true, isUnpaid:false},
        {id: 2, number: 123, amount:"$1,235", status:"open", isOpen:true, isUnpaid:false},
      
      ],

here is my attempt to write the template and use vbind to toggle the classes depending on invoice.isOpen or invoice.isUnpaid

 <div id="invoicesDiv" v-for="invoice in invoices" :key="invoice.number">
                              
                               <img v-bind:style="{ 'margin-top':'.5em'}" src="../assets/svg/logo.svg" height="40px"/>
                                
                                <section>
                                  <small>Invoice No.</small>
                                  <p>{{invoice.number}}</p>
                                </section>

                                <section>
                                  <small>USD</small>
                                  <p>{{invoice.amount}}</p>
                                </section>

                                <section>
                                  <button v-bind:class="{open: invoice.isOpen, unpaid: invoice.isUnpaid}">{{invoice.status}}</button>
                                </section>

                                <img src="../assets/agency/ic_actions-1.svg" height="30px"/>
                            </div>

as you can see the section button is supposed to update classes to either -> open or unpaid but unfortunately it only seems to update to the open class :(

my CSS

.unpaid{
  background-color: red;
  border:none;
}
.open{
  background-color: green;
  border:none;
}

Andronicus · Accepted Answer · 2021-10-24 05:42:05Z

2

Binded classes must be on an Array
The class name could be enclosed on single quotes
Your conditions must return Boolean

<button :class="[{'open': invoice.isOpen}, {'unpaid': invoice.isUnpaid}]">
   {{invoice.status}}
</button>

edited Oct 24, 2021 at 5:42

Andronicus

26.2k18 gold badges55 silver badges92 bronze badges

answered Oct 24, 2021 at 5:19

Guille

7245 silver badges12 bronze badges

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

2 Comments

luther wardle Over a year ago

Ah yes I see, thanks for the correction!

luther wardle Over a year ago

actually as I try to implement this nothing happens not sure why, tried reloading my server my objects contain boolean properties as shown in the example {id: 0, number: 123, amount:"$1,235", status:"open", isOpen:true, isUnpaid:false},

luther wardle · Accepted Answer · 2021-10-24 20:34:06Z

1

I was actually able to fix it by referring to invoice.status where status is a property with a string that matches the css classname

Example:

template

<button :class="invoice.status">{{invoice.status}}</button>

Data to render

{id: 0, number: 123, amount:"$1,235", status:"open"},

CSS that is rendered with the template

.open{
  background-color: green;
  border:none;
}

answered Oct 24, 2021 at 20:34

luther wardle

4691 gold badge9 silver badges24 bronze badges

Comments

Amaarockz · Accepted Answer · 2021-10-24 05:03:11Z

0

Enclose the class names in single quotes

<button v-bind:class="{'open': invoice.isOpen, 'unpaid': invoice.isUnpaid}">{{invoice.status}}</button>

and make sure the isOpen and isUnpaid hold the expected boolean values so that you could observe the difference on the UI

answered Oct 24, 2021 at 5:03

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

v-bind class not changing css on object properties

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related