Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a class conditionally in Vue?

I have a project that I'm converting to Vue, and I was wondering how I can conditionally add a class to certain elements depending on what is returned from the database and rendered with Vue. Here is the code I had for the application when I was not using Vue:

$(document).ready(function() {
  $('.task_element').each(function(index, element) {
    if ($(element).find(".task_priority").text().trim() === "high") {
      $(element).addClass('high');
    } else if ($(element).find(".task_priority").text().trim() === "medium") {
      $(element).addClass('medium');
    } else if ($(element).find(".task_priority").text().trim() === "low") {
      $(element).addClass('low');
    }
  });
});

And this worked fine. But, I'm wondering is there a way to do this with Vue much more easily? Or would I have to find a way to throw this into my Vue app?

Here is part of the component:

<p class="task_description">
  {{ task.description }} <span class="badge badge-pill">priority</span>
</p>
<p class="task_priority">
  {{ task.priority }}
</p>

What I want to do is bind the style of the badge (add one of the classes, either high, medium, or low) based on the value of the task_priority element. How would I achieve this?

like image 270
develpr Avatar asked Sep 01 '18 01:09

develpr


People also ask

How do I add conditional classes to Vue?

We can conditionally add classes to a Vue component by using the v-bind:class directive. The shorthand for that is :class . to set the class according to the value of isRed . Since it's false initially, the green class will be applied.

What is computed in Vuejs?

In Vue. js, computed properties enable you to create a property that can be used to modify, manipulate, and display data within your components in a readable and efficient manner. You can use computed properties to calculate and display values based on a value or set of values in the data model.


3 Answers

You can try this code above for conditional class in the html template

<element v-bind:class = "(condition)?'class_if_is_true':'else_class'"></element> 

You may see the official vue documentation on this topic here.

like image 178
alejandro Avatar answered Sep 21 '22 10:09

alejandro


If you only need to add a class if condition is true, you can use:

<p v-bind:class="{ 'className' : priority === low}"></p> 

or you can use shorthand notation by omitting v-bind

<p :class="{ 'className' : priority === low}"></p> 

This way you don't have to care if condition turned out to be false.

like image 27
Anil Singh Avatar answered Sep 19 '22 10:09

Anil Singh


in Vue class binding I think you can do this right inline in the element and actually add your class you'd like with an additional Vue computed class.

for example:

<div class="task_priority" :class="task.priority">{{ task.priority }}</div>

And do your styling as such (assuming the output for the task.priority is high,medium,low. it looks like it would be according to your posted code)

.task_priority.high {color: red}
.task_priority.medium {color: yellow}
.task_priority.low {color: green}
like image 29
lscmaro Avatar answered Sep 20 '22 10:09

lscmaro