Dynamically binding a class will lose the previously added class - Githubissues

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

https://vuejs.org/

MIT License

47.6k stars 8.32k forks source link

Dynamically binding a class will lose the previously added class #11726

Closed litingyes closed 2 months ago

litingyes commented 2 months ago

Vue version

latest

Link to minimal reproduction

https://play.vuejs.org/#eNp9VMFu2zAM/RVGl7RAG2NbT66btesCbEO7DV2Puig2k6iVJUOSvQyB/32UFDspWvQS0OQT+chHZsdummbWtchyVrjSysaDEnp9xZl3nIFD3zZzrmXdGOthBxZX0MPKmhqm9GzKNdel0c5DJ51cKoSrgDlZCeXw9BA1+t60DhfaoyXICeaQHB1qfwpXc9hxDeSfeWHX6EE4+PZ4f/dVdguFdQDNSiWcu5POz0RVnXBGv5xRjZ7rIkvkiSp9eKwbJTzSF0BRyS4aZIZWgkFmq0abvpScRzpAhYig3yBwdmu0F1KjpUEIiwK8AaoZo5ELYSIH6i46qRJgYltklPJlgVsly+eIW7behycxXWaxNh3ua+6nSDljhddpwPl/Ckmf0ihjcxp2dcnZ/PEVJ+koFjJXMJlMXiQqsrH7IhtmUmwsZIMdOiEZqQxZD7ga+JBDCy+7QDAfPLtR+z6szJ7f0tgKieCHZgvOKFlFqtAQO6nXOVw028uEObeikq1LLspwXQcpohKU53hzqNFRlCI7EnZlTNBtqF3TDkl97k2Tw8eU9dD8fvrXZdCDwIfFnYzTn+92g/szTB/iHKeQw/SmqqZ9Pza8FymlHEea2KTt27MssqOlZGd0XXQXK7mePTmj6fji9gdR60YqtL8aL+luOMvTXYSYUMr8/RF93rZ4NvjLDZbPb/if3Db4OPtt0aENmo2xdGQpvPjzE7dkj8HaVG0YwjvBByRJ28Axwb60uiLaR7jI9nv82yC5H91i61G7oalANCD7iCcNWrx9p/UD3U+zi/iOrp71/wHKUY4K

Steps to reproduce

Mouse enter the "Container" area to add the class add on the div element
Click the button to add/remove the visible class
The class add is removed

What is expected?

The add class still exists

What is actually happening?

The add class is removed

System Info

No response

Any additional comments?

No response

LinusBorg commented 2 months ago

That's expected. Vue will not respect classes that are added manually through DOM APIs because they are not part of the virtualDOM created during rendering.