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.

Answer 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>