I want to add a conditional style in a child component based on the prop value passed from the parent component.
This is a working example of conditional styling:
<li v-bind:class="[booleanValue ? 'stylingClassOne' : 'stylingClassTwo']"
But this only works when my style is based on a single variable and can only have two values (true/false).
I want to implement conditional styling based on a variable that can take multiple values. Suppose I pass a string from parent component to child component stylingDecider, the value can be stylingClassOne, stylingClassTwo, stylingClassThree.
So 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 style is is because there is some other processing going on that will return a class based on said processing, so I can't just use <li v-bind:class="stylingDecider " .
What did i do wrong? Please advise, thank you. I'm using Vue 3 and bootstrap-vue 3.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I just created a working code snippet:
Vue.component('child', { props: ['dynamicstyle'], template: `- Hello !!
`, methods: { getStylingClass(stylingDecider) { return stylingDecider; } } }); var app = new Vue({ el: '#app', data: { stylingDecider: 'stylingClassTwo' } });.stylingClassTwo { background: green; }