Apply conditional CSS to Vue

Question

I'm struggling to apply a conditional Vue statement to change the CSS style based on the text value. I have tried following other tutorials with no luck as I'm a beginner with Vue.

If for example I want the class to be is-success when {{s.specialType}} == "food" AND is-danger when {{s.specialType}} == "drink" how would I do it.

I would appreciate any help. Thanks

<div v-for="s in spc.specials" class="column is-one-third">
    <div class="field">
        <span class="tag is-success is-capitalized">{{s.specialType}}</span>
    </div>
</div>

tony19 · Accepted Answer · 2022-07-15 00:23:51Z

4

Can be achieved using v-bind:class

<span v-bind:class="{'is-success': s.specialType==='food', 'is-danger': s.specialType==='drink'}" class="tag is-capitalized">
  {{s.specialType}}
</span>

Ref: https://v2.vuejs.org/v2/guide/class-and-style.html

edited Jul 15, 2022 at 0:23

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 23, 2019 at 7:54

Azzam Asghar

3461 silver badge10 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-16 05:39:25Z

0

After a quick google search for conditional rendering, i came up with the following solution:

<div v-for="s in spc.specials" class="column is-one-third">
<div class="field">
  <span class="tag is-success is-capitalized" v-if="s.specialType === 'food'">
    {{s.specialType}}
  </span>
  <span class="tag is-danger is-capitalized" v-else-if="s.specialType === 'drink'">
    {{s.specialType}}
  </span>
</div>

Vue.js documentation

edited Jul 16, 2022 at 5:39

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 23, 2019 at 7:56

Thomas Scheffer

5644 silver badges7 bronze badges

1 Comment

Azzam Asghar Over a year ago

Why play with rendering when Vue already has directives designed specifically for conditional class addition and removal?

Collectives™ on Stack Overflow

Apply conditional CSS to Vue

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related