How can you selectively add a CSS class during the iteration of a VueJs object?

Question

How can you selectively add a CSS class during the iteration of a VueJs object?

Using Vuetify components:

<v-layout row wrap> 
     <v-flex xs2 v-for="(month, key) in months" :key ="key">
          <router-link class = "decoration" :to="month.target">{{(month.month)}}</router-link>
     </v-flex>

The "v-for" loop is going through an array of objects with different properties:

data () {
    return {

        months: [
           {
               month: 'Gen',
               target: ''
           },
           {
               month: 'Feb',
               target: ''
           },
          and so forth.

Is there a way to selectively add the class underlined to certain months in the first code block, rather than all of them?

Appreciate any help on this matter!

javascript jquery css vue.js vuetify.js

Answer 1

Answer №1

To apply conditional classes in Vue, simply use :class='[{"className": X}]'. Make sure to include the : before the class attribute.

Here, X represents a computed or data property in the Vue component that evaluates to a boolean value. If X is true, the specified class will be added, if false, the class will not be applied.
The className parameter refers to the name of the CSS class you want to apply.

Answer 2

To apply conditional classes in Vue, simply use :class='[{"className": X}]'. Make sure to include the : before the class attribute.

Here, X represents a computed or data property in the Vue component that evaluates to a boolean value. If X is true, the specified class will be added, if false, the class will not be applied.
The className parameter refers to the name of the CSS class you want to apply.

Answer 3

Answer №2

Although the previous responses are accurate, it seems you are looking for a way to include both a fixed class and a dynamic class.

To achieve this, you can use the following code:

<router-link class="decoration" :class="{ underlined: CONDITION }" :to="month.target">{{(month.month)}}</router-link>

You can easily define the condition in a method like this:

methods: {
   isUnderlined() { return SOME IF STATEMENT OR SOMETHING }
}

It is important not to enclose the :class attribute in brackets [] as suggested in another response, as it should be an object {}.

Answer 4

Although the previous responses are accurate, it seems you are looking for a way to include both a fixed class and a dynamic class.

To achieve this, you can use the following code:

<router-link class="decoration" :class="{ underlined: CONDITION }" :to="month.target">{{(month.month)}}</router-link>

You can easily define the condition in a method like this:

methods: {
   isUnderlined() { return SOME IF STATEMENT OR SOMETHING }
}

It is important not to enclose the :class attribute in brackets [] as suggested in another response, as it should be an object {}.

Answer 5

Answer №3

Here's a way you can accomplish this:

<td :class="items.properties[3] == 'pawned' ? 'text-red' : ''">{{ items.properties[2] }}</td>

Answer 6

Here's a way you can accomplish this:

<td :class="items.properties[3] == 'pawned' ? 'text-red' : ''">{{ items.properties[2] }}</td>

Answer 7

Answer №4

Try something along these lines:

<router-link :class="{'highlighted': month.shouldHighlight}" :to="month.target">{{(month.name)}}</router-link>

Let me know if this solution works for you!

For more information on this topic (including using multiple classes), check out: https://v2.vuejs.org/v2/guide/class-and-style.html

Answer 8

Try something along these lines:

<router-link :class="{'highlighted': month.shouldHighlight}" :to="month.target">{{(month.name)}}</router-link>

Let me know if this solution works for you!

For more information on this topic (including using multiple classes), check out: https://v2.vuejs.org/v2/guide/class-and-style.html

How can you selectively add a CSS class during the iteration of a VueJs object?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Sending various values from ASP.NET to a javascript function

Is it possible for JavaScript/React to observe the movement of elements on the webpage?

Instead of scrolling through the entire window, focus on scrolling within a specific HTML element

Using jQuery to Construct an Object from a JSON Response

Mesh with custom lighting effects in Three.js using specific light sources

How can we convert milliseconds to the corresponding date and time zone in Java?

There seems to be a contradiction in my code - I am returning a Promise but TypeScript is throwing an error saying that the

Issue with JQuery .fadeToggle() function: Unexpected behavior causing automatic fade-out

Encountering the React.Children.only error while trying to use the <Link> component in Next.js

Unexpected response: The JQuery AJAX request did not return the expected JSON data

I need assistance with displaying this array either using CSS styling or in table format. Can someone please

Include a new key and its corresponding value to an already existing key within FormData

Having trouble retrieving information from the server using ajax, javascript, jquery, and php

Attempting to develop a Discord bot equipped with commands that are restricted by permissions. Upon testing the functionality, I encountered an unexpected error

Is the IE7 Modal Dialog Misaligned?

Trigger event once the component has finished construction

I have successfully implemented ngCordova local notifications, but now I am looking for a way to make it trigger for each individual

Connecting ViewChild to several elements

How to change the state using an object as an argument in the useState hook within a function

The v-show directive only starts hiding elements after Vue is mounted