Criando uma diretiva de select (e multiple) — Vue.js
Bom, não sou muito fã de utilizar componentes de terceiros para fazer minhas funcionalidades simples que “componentizam” as tags HTML (mas só quando é algo simples)
E quando falamos da tag select no HTML, e simples incluir opções manualmente para utilizar nos seus formulários, porém e quando precisa ser carregado do banco/api? E ai entra o problema…
Vamos que implementar uma requisição em todo componente que precisar do select de “pessoa”, “situação”, “município”, e qualquer outra entidade do seu negócio?
A minha solução foi criar uma diretiva, onde eu posso continuar utilizando a tag “select” do HTML, sem perder meus estilos já criados ou prototipados pela equipe de design, porque imagine você devolver o projeto para o pessoal de layout e pedir para ajustarem o CSS simplesmente porque não acatou os estilos implementados no CSS no seu componente de terceiro ou customizado? Vamos lá….
Explicando….
A importação realizada da classe API, e especifica do meu projeto, então vocês poderiam substituir pelo Axios ou qualquer outro componente que faz requisições para API, ou meios de consulta dos seus dados.
O componente Choice.js, é um plugin que consegui trabalhar muito bem casado com a estrutura do Vue.js e que não depende de jQuery ou outro framework, é puramente Javascript… E ao instanciar ele para um elemento do tipo “select” do HTML, ele transforma a caixinha padrão em um elemento digitável. Tem alguns exemplos na própria página do plugin e outras configurações adicionais https://joshuajohnson.co.uk/Choices/
Seguindo, dentro da diretiva com o nome de select, crio a variável “resource” que é o meu endpoint da api, ou seja, segue específico do meu negócio implementado, e por fim o resultado da minha API que vem em “data.dataList” é percorrido e adicionado como “option” dentro do “select”
Por questões de tempo de execução, inseri um settimeout de 500ms somente para dar tempo de renderizar os itens no DOM e instancio o Choice.js para estilizar.
E a chamada do select? Fica simples, veja só… Tenho um “select” que lista “situação do pedidos” em um formulário de filtro onde passo o valor setado no select eu jogo para uma propriedade na minha v-model
A chamada se resume em criar a tag “select” e chamar “v-select” e dentro passar um objeto com as propriedades necessário, no meu caso “dataitem” é o nome da entidade onde buscarei os dados e me retornara o “dataList” e “filter.situacaoPedidoId” e o filtro que setarei o valor para realizar a busca posteriormente.
Caso seu filtro seja um multiselect é só passar a tag “multiple” que é nativa do HTML.
As vantagens é que você e sua equipe não precisa se preocupar com o layout e nem com implementações terceiras de outros componentes, é simples e fácil da equipe entender.
Você só precisará implementar a primeira vez no modelo da sua API, depois é só reutilizar.
Abraços!