Vuejs: Multiple Condition in a Class

Question

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.

Matt · Accepted Answer · 2020-05-11 00:03:07Z

1

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

edited May 11, 2020 at 0:03

answered May 10, 2020 at 23:20

Matt

44.1k6 gold badges105 silver badges103 bronze badges

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

3 Comments

No One Over a year ago

I think && works but the new Date() is causing an error.

No One Over a year ago

It says "Issues detected. The new issues panel displays information about deprecations, breaking changes and other potential problems".

No One Over a year ago

I am sorry I for my post, I mean one of the condition must be meant. Either #1 OR #2. Not #1 AND #2.

Malitta N · Accepted Answer · 2020-05-10 23:27:12Z

0

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>

answered May 10, 2020 at 23:27

Malitta N

3,42325 silver badges30 bronze badges

2 Comments

No One Over a year ago

I am sorry I for my post, I mean one of the condition must be meant. Either #1 OR #2. Not #1 AND #2. Thank you for your response. I tried your code but I can an error, "Issues detected. The new issues panel displays information about deprecations, breaking changes and other potential problems."

Malitta N Over a year ago

Oh in that case you should use || instead of &&

Soil92 · Accepted Answer · 2020-05-11 08:17:18Z

0

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.

answered May 11, 2020 at 8:17

Soil92

472 silver badges9 bronze badges

Collectives™ on Stack Overflow

Vuejs: Multiple Condition in a Class

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related