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!