CODEWITHSUNDEEP
javascriptvue.js
No One
No One

Reputation: 683

Vuejs: Multiple Condition in a Class

I am trying to highlight rows in a table if conditions are met; fine > 0 OR date due > date today

This code works fine but it is only for one(1) condition. If issue.fine > 0.

<tr v-for="issue in issues" :key="issue.id" :class="{'text-danger font-weight-bold': issue.fine > 0}">
   <td>{{ issue.firstname}} {{ issue.lastname}}</td>
   <td>{{ issue.datedue }}</td>
</tr>

I need to have two(2) conditions;
1. issue.fine > 0 OR 2. issue.datedue > the date today

I tried this but it does not work.

<tr v-for="issue in issues" :key="issue.id" :class="{'text-danger font-weight-bold': issue.fine > 0, issue.datedue > new Date()">
   <td>{{ issue.firstname}} {{ issue.lastname}}</td>
   <td>{{ issue.datedue }}</td>
</tr>

Please help. Thank you.

Upvotes: 0

Views: 252

Answers (3)

Soil92
Soil92

Reputation: 47

I would like to suggest to move this logic to a computed property just for better readability and remove the clutter from the HTML code.

Upvotes: 0

Matt
Matt

Reputation: 44058

Use &&, not a comma.

issue.fine > 0 && issue.datedue > new Date()

The comma is syntactically fine, but behaviorally it returns the value of the final expression.

EDIT:

In response to your edit, the operator for OR is ||. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

Upvotes: 1

Malitta N
Malitta N

Reputation: 3423

Multiple conditions which should be meta must be combined with an &&, not a comma.

<tr 
  v-for="issue in issues" 
  :key="issue.id" 
  :class="{'text-danger font-weight-bold': (issue.fine > 0 && issue.datedue && new Date())"
  >
  <td>{{ issue.firstname}} {{ issue.lastname}}</td>
  <td>{{ issue.datedue }}</td>
</tr>

Upvotes: 0

Related Questions