CODEWITHSUNDEEP
javascriptvue.jsvuejs2
chimichi004
chimichi004

Reputation: 79

Changing background color using v-bind with condition method

How to v-bind with condition to change bgcolor of my table row using my data in leavehr.is_read_hr == '0' as a sample.

  <template v-for="leavehr in leaveshr">
      <tr class="even">
         <td><input type="checkbox" class="Leavesub_chk" name="ids[]"  :data- 
           id="leavehr.leave_id"></td>
         <td class="tr_">@{{leavehr.lastname}}, @{{leavehr.firstname}}</td>
         <td>@{{leavehr.leave_start}}</td>
         <td>@{{leavehr.duration}} Day(s)</td>
         <td>
            <h4>
            <span v-if="leavehr.head == 'approved'"class="label-default label label- 
             success">Approved</span>
            <span v-else-if="leavehr.head == 'pending'"  class="label-default label 
             label-warning">Pending</span>
            <span v-else="leavehr.head == 'pending'"  class="label-default label 
             label-danger">Rejected</span>
            </h4>
        </td>
        <td>
            <h4>
              <span v-if="leavehr.hr == 'approved'"class="label-default label label- 
               success">Approved</span>
              <span v-else-if="leavehr.hr == 'pending'"  class="label-default label 
               label-warning">Pending</span>
              <span v-else="leavehr.hr == 'pending'"  class="label-default label 
               label-danger">Rejected</span>
            </h4>
       </td>
       <td>
         <a :href="'ViewsLeave/' + leavehr.leave_id" class="view-modal btn 
         btn-info btn-sm">
          view
            </a>
      </td>
     </tr>
    </template>

i'm having a hard time to solve this. I'm not good using vue.js also. I don'y which one would i use. V-IF or V-BIND. What i really want to change the color when its not read. So the back-end is done. only the front-end to change color.

Upvotes: 1

Views: 4975

Answers (1)

Alex Taylor
Alex Taylor

Reputation: 8813

Have a look at the documentation for class and style bindings. Classes can be added conditionally:

<span class="label-default label"
 v-bind:class='{ "success": leavhr.hr == "label-success", "pending": leavhr.hr == "label-warning", "rejected": leavehr.hr == "label-danger" }'
 >{{leavehr.hr}}</span>

You may wish to use a computed property to map leavehr.hr to a human readable value.

Upvotes: 1

Related Questions