VueJS - Dynamically change border color of third party component

Viewed 24

I'm writing a bootstrap-vue application where I've built a form using a mixture of basic components (text field, radio buttons etc) plus a component called functional-calendar.

I'm currently trying to add validation using vuelidate and it's working great for the basic components. I just use the class:{error:condition} when declaring those components in the template section.

However, I can't do this for functional-calendar as it defines its own CSS. I can override the CSS class they've used in my style section but I'm not sure how I can apply it to single components and then use 'error' specifically on those that fail validation. I found something about using ::deep but couldn't get that to work either.

CSS is a bit of a weak point for me.

0 Answers
Related