Conditional class style binding in Vue.js

Question

I want to make that styles are added to images only under a certain condition.

Here is code:

<div>
  <div v-for="(item, index) in productsList" :key="item.id" class="cart-img">
    <img
        v-if="item.file"
        :src="
           `https://server.com/${
            index === productsListBigIndex ? item.fileWide : item.file
              }`
            "
        :alt="item.altText || item.text"
        draggable="false"
    />
    <img
        v-else
        :alt="item.altText || item.text"
        :src="'https://server.com/empty.png'"
    />
    <p style="font-size: medium">{{item.text}}</p>
  </div>
</div>

The style should depend on the index and productsListBigIndex. For example, if the index is 0 or 2, then this style (in particular the size of the picture) will be added, otherwise it will not.

Thanks for answers!

Abin Thaha Azees · Accepted Answer · 2021-07-20 10:53:04Z

2

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

Like this you can conditionally add or remove a classname and styles specified,

answered Jul 20, 2021 at 10:53

Abin Thaha Azees

4,7733 gold badges16 silver badges44 bronze badges

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

Comments

Bharat · Accepted Answer · 2021-07-20 10:55:21Z

0

v-bind:class="getClass()"

methods:{
 getClass(){

   //logic to check the condition and return the class name
 }
}

answered Jul 20, 2021 at 10:55

Bharat

1,1958 silver badges14 bronze badges

Collectives™ on Stack Overflow

Conditional class style binding in Vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related