Is there a conflict between manually adding a class and binding a class using Vue?

[YoringChen]

Link to minimal reproduction

https://play.vuejs.org/#eNp9Uk1v2zAM/SucLk6BzEa2nTInwzYU2IZtLdoCveji2kyiVpYEfaQpDP/3UlKSpkBR+GLyPZKPjxrYd2PKbUA2Z7VrrTAeHPpgllyJ3mjrYQCt/umgPHYwwsrqHgoqKL6eMCyuXmFccdVq5Tz0bg2LiE+KXyilhlttZfehODsQWtk492nPWTXS4RFCuU9TJn5HHZPJGSyWMHAFRCq3jQz4rUyd/grny6brJkUKZ3FQpFUVtLrvMa2hg5/mwTN4FFLCHQLVENJqa7H18inWZGm5PSnxNiBX415MXWW7yCgKPPZGNh4pAqg3syh7wRlKzmCe+lA0HJYdOVsOQ/JmHOtqM8tlQpngYfux1x1K4hNO5RWBdXUygE2Zd+TQSqzLe6cVnS45wRltaIREe2G8IAc5m2ePItaQ+Y9/Ui4uMj3k2w22D2/k790u5ji7tOjQbpGzI+Ybu0af4fPr/7ij/yNI6oMk9jvgFTotQ9SYaT+C6kj2CS+p/Z2el1DrG3e+86jcYal8CYAx8TmjJ/fzndVf5H4uv6Q6OiMbnwExk/9r

As shown in the screenshot, the manually added class is being ignored.

[Shyam-Chen]

class2.value = true;

await nextTick();
el.value?.classList.add('class1');

[YoringChen]

Thanks for your reply. But it makes the execution timing of :class slower than that of classList. In reality, we can't guarantee their order; classList might execute before :class, so there's still an issue.

[jacekkarczmarczyk]

You souldn't access DOM directly to update classes

[Shyam-Chen]

https://vuejs.org/guide/extras/rendering-mechanism.html#render-pipeline

[hubdidub]

When I read this this in the template: :class="{ class2 }", I would interpret it as:

• I want the element to have the following classes:
  • "class2" when the ref class2 is true

The way I see it, you are simply overwriting what you did with el.value?.classList when you update the class2 object.

So, as @jacekkarczmarczyk suggested, manipulating the DOM-node directly is probably not a good idea.
Instead, you could add a property to the object you bound to :class, or use a computed property.

Side note:
As far as I know, Vue isn't supposed to merge those classes.
Vue does merge classes when you have a dynamic binding and a static binding, though:

<h1 :class="{ class2 }" class="class1 class3">

[YoringChen]

@hubdidub @jacekkarczmarczyk Yes, I'll try to avoid directly manipulating the classList. The issue arose because I needed to add a class to an element in a custom directive, which led me to use classList. I can't control the order between the classes added by :class and those manipulated by classList, which caused the conflict I mentioned.

Currently, my solution is to separate the usage of :class and v-xx, ensuring they are not used together to avoid this conflict.

[hubdidub]

I see, in that case, maybe it would be better to do the DOM-manipulation in an onUpdated hook instead of onMounted to make sure it's re-applied after Vue re-renders the element.
But the effect is probably the same as when you do it after a nextTick, so it's probably not what you are looking for.