Campos de selección múltiple en Vuetify con opciones deshabilitadas dinámicamente
Hace poco tuve la necesidad de crear campos de selección múltiple en Vuetify con opciones deshabilitadas dinámicamente. La idea es sencilla, imagina que tienes un select con múltiples opciones que hacen uso de checkboxes para poder seleccionar y deseleccionar opciones. Ahora imagina que dependiendo de las opciones seleccionadas quieres habilitar y deshabilitar opciones de forma dinámica. Pues justamente eso es lo que vamos a estar tratando en esta entrada.
Además de todo lo anterior, también vamos a ver cómo trabajar de forma avanzada con los campos de selección múltiples de Vuetify sobrescribiendo por ejemplo los slots item y selection para añadir un checkbox y modificar la apariencia del texto que deseamos mostrar, muchas veces es algo interesante.
Si quieres especializarte a fondo en Vuejs 2 y Vuex no te pierdas esta serie de cursos que hemos preparado para ti.
A continuación adjunto un ejemplo completo de uso donde haremos uso de un watcher para saber qué está pasando en cada momento en nuestro campo de selección múltiple y así podremos actuar en consecuencia.
La clave de todo está en utilizar la prop item-disabled="isDisabled" en nuestro campo de selección. De esta forma Vuetify buscará en cada iteración una clave llamada isDisabled, si existe y es true entonces ese elemento directamente quedará deshabilitado.
Aunque es cierto que también podríamos hacer eso al momento que sobrescribimos la template item, creo que esta forma también es súper interesante.