How can I add Multi class binding in Vue2

Question

I faced one problem when I put multi-class binding in Vue2.

<div class="list-item clearfix" v-on:click="selectItem(trail)" :class="popupMode ? 'popup' : ''">

Here popupMode is props and I'd like to add one more class binding when I select the Item(click function:selectItem()).

For example, similar to selected.

This class is defined. How can I manage this problem?

tony19 · Accepted Answer · 2022-07-16 00:57:41Z

1

Update HTML class bind like:

v-bind:class="{ popup: popupMode, selected: isSelected }"

where isSelected is a new prop like popupMode. On element click when selectItem method is called, set the bool isSelected prop to true and you will be able to see selected class after that.

JS:

data: {
    popupMode: true,
    isSelected: false
},
methods: {
    selectItem() {
        this.isSelected= true;
    }
}

For more info check this: Binding HTML Classes

edited Jul 16, 2022 at 0:57

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Nov 10, 2017 at 15:45

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

6 Comments

dev-assassin Over a year ago

@palasH, it works for me. but I have a problem to use this. for example, there are 5 items, when I chick the first item, it'll be changed to grey color. then when I next(second) item, I'd like to change the first item to original status and second item is be changed to grey color too. In this case, how can I do it?

palaѕн Over a year ago

You can create a default class with black or any other color which you want to set as original status color. then update bind class for all like: { popup: popupMode, selected: isSelected, default: !isSelected }. This way only one will be set as selected class at one time.

dev-assassin Over a year ago

default class is class="list-item clearfix". in this case, how can I call it?

palaѕн Over a year ago

{ 'list-item': !isSelected, 'clearfix': !isSelected }

dev-assassin Over a year ago

well... it doesn't work for me. I'd like to discuss more details about this. where can we do it?

|

Vladislav Gritsenko · Accepted Answer · 2017-11-10 15:45:38Z

0

You can try this method:

{ active: isActive, 'text-danger': hasError }

Don't forget place isActive and hasError in data (in this case). I hope this help's.

answered Nov 10, 2017 at 15:45

Vladislav Gritsenko

8235 silver badges16 bronze badges

Collectives™ on Stack Overflow

How can I add Multi class binding in Vue2

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related