v-bind:style directive does not work with conditional comparisons

Question

I can bind classes to elements in vue based on the following conditions:

:class="i18n.global.locale == 'ar' ? 'class1': 'class2'"

But when I try to use the same conditional binding style like this:

:style="[i18n.global.locale == 'ar' ? { 'background': 'blue;' }: { 'background': 'red' } ]"

None of

styles are applied to this element. Why doesn't the :style directive work?

Both directives apply to the container div that contains all other elements.

Answer 1

I did some research on your problem, so to solve it you can do the following:

1. Check the style of the element in the browser dev tools, it may happen that the bound style in the css file is overridden, for example, if you have a link to the css file
2. Here { 'Background': 'Blue;' } Tried removing the ";", for me it started working when I removed it.