vuetifyjs
[Bug Report][3.7.0] v-chip retains wrong css class 'v-chip--selected' when v-model is false
Environment
Vuetify Version: 3.7.0 Vue Version: 3.4.30 Browsers: Firefox 129.0 OS: Windows
Steps to reproduce
- Klick the Select Button (all two items should be selected and the Select Button changes to Un-Select )
- Un-Select one item manually
- The Un-Select Button will change back to Select but retains the css class 'v-chip--selected' which makes the backround slighly colored.
Expected Behavior
No background color changes are retained when switching the v-model state.
Actual Behavior
'v-chip--selected' is set so the backgorund is colored even when the chip is not selected
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
I hope this is not an error on my side, my thought process is: v-model is the de facto singel source of truth if the chip is selected or not and 'v-chip--selected' as css class when being selected seems off to me.
This would be easier if VChip supported the active property, but my suggestion is to control the VChipGroup model or use a VBtn:
https://play.vuetifyjs.com/#eNqtVm1v0zAQ/itWJLQhLS1tBxKh5VVDgg+AePmA1n3wnEtrcO3IPmeFaf+dy+vcNKuGQJpW557z3fNczuecX0fOivGrPB8VHqIkmiNscsURni81Y/MiFmuZxytrfF4aGEs2JgUVF1x5WCwjBwoEQvoVHAruwI0U6BWu2WKxYEo6/JidbUF4lEZ32At2/uiCJUx7pZZRHVco7hwF3GA8rW0VA+KQyqJZdoTaR8aKWGa0K5MKwY74bbydmDaestxITT4h7vCXKkUIo4xNGAJXz1hmNMZXIFdrTNilUWm4o+BWco20x3hUUsMO+lIoKX52VXkVsukkMPZNx18qh07VuJZ1SCYoB/+k7L/LOKhhPm5fWwvUTUSmprFSjjxGfqkaWUVcddZQT7XpE0ndWcruN1a/iShAwUsknrRQCtpJ/FXVZJNzIt4AZcyunZFSar6BFnRrcxXXfErDmOjPx8ERoUcnrMyxkgrb3FikVBn3Ctl1k5mEHj9snxizgN7q22fG6u5NQhNj1MsJyzi99pPQnHGpIB1CBNcC1B2gNvjZ6yHEeq2lXg1BzgsBzmV+gMlNsE7JCSy6hJ2H23fkEAWqa8KO3lrzGzT7blbe4tFOvlID9asEijR5/LSHZZwO5JPRo70t9pL8p6c9e24NgiTJp3tbpDVkP5o86KdfKY8wWCXCyvYlXjvmsAoXwXqvhak0Id5v4MOVa7uSOJfLyWQ66zN3yNGXZetLpW548vh0Mrmb933STWbT2fRvc07vU6ubetGCVxzFOjgJe4UMTxJRXUs3uh3+bBEmrMCDF1Tlccct1RFsmLW/G8C1SUl2jyONyV1uMmPHPX47+F0E2YJ6Zc8tFFn3Z3AWWXk73DP2sOYNz497b5HGHFs8r35H3VwMXB4e5ojWhxSHy0nm+biboNFJhE4YncnV6Iczmr5HKk31zKa5Zz/mzbzvyr+MKJ25el/ZypxNfNqzBvFzwP7DbUvbMvpkgcZWQcO+w5DbFdDVUMJnXz7AltYdSPeTp9vqEPgZnKEZQhxrt9dep0Q78KvYvtuUFwVN3a/ubEsTx7Wi2qLV1VlG9FH25oD0W7qz0aypJ/1FNyflp1X17+IPqqLhAg==
https://play.vuetifyjs.com/#eNqVVm1v0zAQ/itWJNQhLS1tBxLRyquGBB8A8fIBUT54zqU1OHZkn7OOaf+dS1pnbppVQ6pa+56z77nH53N/3iTOisnrqhrXHpIsOUcoK8URXiw1Y+e5rJlQ3LnFMikxnS0TVnqFslJbh63LbkiTOr1EHWaMZVygrIEWO1AgEPJv4FBwB26sQK9wzRaLBVPS4afiYgPCozQ6YMvkbqeOhE1nrDJSI9gYd3itmjjCKGMzhsBVDNfcSq6RHIxHJTXkMWqN1zmZOsMroaT409F+raLNumQZu7lhhVTEZMyVYi/Z6LtOv7YrRixjozC8ve30mbQCBekmQbswasd1mnPkKfJLBVvHOi1NDmpIxsArk3RwjUB9LYNDEJA2qHmDpNMA5aCdxOtWvbKiIwtAs2dac+UbZZFCal5CAN3aXKVbPo1hQvTPJ1H10NQJKytsM4RNZSxSqIJT/bCbXWRK9ORxmNFBAHqr7+Zsp28WmxgjtTNWcOXgNDYXXCrIhxDBtQB1D6gNfvF6CLFea6lXQ5DzQoBzhR9gchuNc3ICiy5jP+Ple+kQBdKVCuadNX9Bsx9m5S2O9uI1OVBlS6Cdpk+f97CCY8aejZ8cLLGX5D8769kraxAkpXx2sERaQ/bR9FE//Ep5hEGVCKMLVBGvPXOswq9ofFDCJE2M9wv4uHKhKolzM5xOZ/M+c4ccfSNbP1WqhmdPz6bT+3k/JNx0PpvP/jfm7CFa7dpGAK84inV0Ew6EjG8SUV1LN47a0yIO2IJHe3LrcV9jDgR3zMJvCbg2OaXd40j9c5+bLNhJj98efh9BtqBaOXCLk9zWZ3QXGdD8gXsP51zy6qR3itTm2OJF+zvu+mLk8vg4R7Q+pjgsJ5nPJ10HTU4TdMLoQq7Gv53R9FS3OW17NvU9+6na9ftO/mVC4czVh9bWxNztT2vWIP4M2H+7TWNbJp8tUNuqqdl3GHK7AnoaGvji60fY0LgD6X3y9FodA7+AM9RDiOPW7Q29uUQ78mvZvi+bh4K67jd3saGO40JSQbStOsuE/q+8PZL6Hd35eL7Tkz7J7an2SrVfv/4BZ3ed9A==
Thank you for your contribution and interest in improving Vuetify! Make sure to join us in the Discord community.
@johnleider Thank you for your time and work!
We will use buttons in that case. The Example I built here is rather simple, in reality I use several chips in the group with different rules, therefore I cannot use the suggestion to control the VChipGroup model easily, but buttons should work just fine.