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://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;
}
<button :class="[{'open': invoice.isOpen}, {'unpaid': invoice.isUnpaid}]">
{{invoice.status}}
</button>
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;
}
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