Unable to get my dynamic CSS working with Vue.js

Question

Is there a way for me to add dynamic styling depending what the result in my div will be?

I have created a function which will calculate a total number and then change the data property to return either 'Low' or 'Good' depending on what the count will be.

I have two different classes which I have created:

.good-result {
  color: green;
  font-weight: bold;
}
.poor-result {
  color: orange;
  font-weight: bold;
}

My dynamic styling looks like this

<div class="resultValue">Water intake: <span :class="'Low'?'poor-result' : 'good-result'">{{ resultsWater }}</span></div>

If the data property resultsWater says 'Low' I want to try and apply the .poor-result style else the .good-result property, currently it only displays the .poor-result no matter if the divs value is 'Low' or 'Good'

All non-empty strings are truthy, so 'Low' will always evaluate to true. — Robby Cornelissen
– Robby Cornelissen, Commented Dec 24, 2020 at 11:32

Boussadjra Brahim · Accepted Answer · 2020-12-24 11:33:29Z

1

Try to use string interpolation and compare resultsWater to 'Low':

 :class="`${resultsWater === 'Low'?'poor-result' : 'good-result'}">

answered Dec 24, 2020 at 11:33

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

Unable to get my dynamic CSS working with Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related