I can bind a class to an element in vue depending on a condition like so:

:

but when I try to bind a style with the same condition like so:

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

neither of the styles is applied to the element. Why is the :style directive not working?

Both directives are applied to the container div which envelopes all other elements.

CodePudding user response：

I made some research for your issue, so to resolve it you may do:

1. Check styles of element in your browser dev tools, there may be situation of overriding your bind styles from css files, for example, if you have links to css files
2. Here { 'background': 'blue;' } try to delete ';', as for me it started works when i deleted.