How to add conditional styling in Vue.js using a method?

Question

I want to add conditional styling in a child component based on the values of a prop passed from the parent component.

This a working example of conditional styling:

<li v-bind:class="[booleanValue ? 'stylingClassOne' : 'stylingClassTwo']"

but this is only applicable for when my styling is based on a single variable which can only be of two values (true/false).

I want to achieve conditional styling based on a variable that can take multiple values. Assume I pass a string from my parent component to my child component stylingDecider, which can be of values stylingClassOne, stylingClassTwo, stylingClassThree.

Therefore I want to do the following: <li v-bind:class="getStylingClass(stylingDecider)"> but this does not work. The reason I need a method to decide what the styling is because there will be some other processing going on in the that will return a class based on said processing, so I can't just use <li v-bind:class="stylingDecider".

What am I doing wrong? Please advise, thanks. I am using Vue 3 and bootstrap-vue 3.

Please share you whole code

Boussadjra Brahim
– Boussadjra Brahim

2022-06-05 13:22:04 +00:00
Commented Jun 5, 2022 at 13:22 — Boussadjra Brahim
– Boussadjra Brahim, Commented Jun 5, 2022 at 13:22

halfer · Accepted Answer · 2022-06-08 23:45:39Z

1

I just created a working code snippet:

Vue.component('child', {
  props: ['dynamicstyle'],
  template: `<ul><li v-bind:class="getStylingClass(dynamicstyle)">Hello !!</li></ul>`,
  methods: {
    getStylingClass(stylingDecider) {
        return stylingDecider;
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
        stylingDecider: 'stylingClassTwo'
  }
});

.stylingClassTwo {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <child :dynamicstyle="stylingDecider">
  </child>
</div>

edited Jun 8, 2022 at 23:45

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Jun 5, 2022 at 15:26

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

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

1 Comment

Eshmam Over a year ago

Thanks! This is a working code snippet. Looks like I was making a very simple mistake. I was returning .stylingClassOne in my getStyling() method instead of returning stylingClassOne.

Collectives™ on Stack Overflow

How to add conditional styling in Vue.js using a method?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related