Dynamic class bindings removes classes added by third party library

[maheshshah196]

Version

2.6.11

Reproduction link

https://codepen.io/maheshshah196/pen/VweygMB

Steps to reproduce

Open above codepen link.

Open devtools and inspect element on first div, and check class.

Enter class in "Add Class" textfield, and click on "Add" button

Check class on first element in inspect

What is expected?

class added by jquery ("jquery-test") should not be removed after adding new class

What is actually happening?

class added by jquery is getting removed when adding new class

---

I am working with Ionic web components in vue.

Since Ionic web component adding it's own class, I am not able to apply vue dynamic class on it

[posva]

This is expected: Vue cannot track the classes added by the user. You should contain jquery plugins inside components.
For further questions, please use the forum or the Discord chat

[maheshshah196]

Thanks @posva for replying.
Actually problem is I am using Ionic web components with vue and ionic is adding it's own class to web component, so bcoz of that I am not able to apply vue dynamic class on it.

[maheshshah196]

It look's like vue is replacing entire class attribute, instead if it does classList.add or classList.remove while tracking, then it should solve the issue.

[posva]

Unfortunately, that is not supported by all browsers. This is intended: if you handle classes with Vue, you should handle all of them with Vue. If you add classes manually with javascript, you should handle all of them manually. This has been like this for a long time so you can find resources about it and how to use it in your specific scenario 🙂

[maheshshah196]

Okay, thanks, but in my scenario, I am using Ionic web components. Where Ionic adds "ios" or "md" class depending on platform to each of it's web components.

So to apply my dynamic class from vue, everytime I need to create wrapper div to ionic web component.
This will solve problem but creates unnecessary dom elements.