vuetify3的v-list中已经选中的元素时如何防止选中状态被释放

Question

如何防止重新选择已经选中的元素时解除选中状态。

使用vue3、vuetify3 v-list 由 v-list-item、v-list-group 和 v-list-group 的子项组成。

我正在开发与该链接中类似的东西。当您第一次单击“用户”>“操作”>“创建”时，它呈灰色，但当您再次单击时，它会取消选择。我应该怎样做才能防止我的选择被取消？

示例站点：https://play.vuetifyjs.com/#eNrVVctqGzEU/RWhjWPw2IvsBseQpoG20AdJs/J4oc5cO0o0ktDDdTH+917J8/L4UegiEDAe6T7PPUczmm+pNfnkVuvx2gNN6dRBqQVzMMskIdN1Irh1ZJ 2UqgCRKg0SipuMhkVGY0wTlXDMJdoA+oqE50piYFnw5FmVkFHiuBOApk9xO5tOOmlY6bDWyiivyZo JH1KeLBjb9MOoGiUis0K5lowor5lTBoO3iEFpS3adhEOQrZVggV9chpFiUka7vhOzsDxXXrok5yYX OEY3vB6wQtu6jmatIE06ZDfGkwTcFiVvCf9PCnpK9Sdv8NfNTqM+g/sSw8sI6moeG4xIoHOBjyHhkrDQrMd7+gp/MIH3rD05wqMXUU8Qnz1fTeWR76w6XSX+rRDSr8Igb6RR0+5NVMqNL96FS GeMtQk3PV6mNjdcBwchsNHKOFLAknnhyHZfrmCOpeRqSG5m5KqyERK+gCmZD+LLPliMavv+PKOnxT4ffGWSraAE6QYjMuh+R0psxLWARHknuIROpZD4CM5xubJ1Wq5WJyLbVdSp1/ zOAA5bV9DC2zPNHoAVddiSn8X0pJGRpp7f7w5DPoKANGRvjrA7xrsbxsUuiNLIQEfUWTw1S74av1gl8VKKpGc0V6VGWOa7rs5+WkuUUSAE+v0l2pzxUDXAnGfix0/YX+wm2DL6wwAquMbD1vgcMytwe /f94zfY4Lpx4kXow9G84HwAq4QPGPdhH7wsEHYnLqL9XIbThur+tPcbB9LWQwWgkZcYn1G8me8ujN7CvR5fV3zij+5G0gsR/xZ/AfQGbY8=

我们开发了它，以便可以将选择的项目存储为 selectedItem。然而，它并没有解决 UI 方面的取消选择问题。

该值存储在 selectedItem 中。

有没有办法通过将每个元素的 .v-list-item--active 与存储在 selectedItem 中的内容进行比较来添加或删除 .v-list-item--active ？难道我们不能用 v-model:selected="selectedItem" 来控制内容吗？

Answer 1

你好，

这可行，但超级难看=> vuetify_sample

致以诚挚的问候