Solucionado
Prezados, bom dia! Como montar um formulário conforme o modelo? A ideia é a seguinte:
Selecionar o tipo de Log que pode ser por Cadastrador, Fau, Erro, Sistema. Se for escolhido o Cadastrador, inserir o CPF ou se for Fau, o código e assim por diante. A ideia desse formulário é para uma aplicação feita em VueJS que se utilizará de uma API criada a partir do ElasticSearch. Detalhe: quando for escolhido por exemplo o CPF, no caso a pesquisa será por CPF. E, nesse caso será obrigatório o CPF.
Para criar um formulário que atenda a esses critérios em uma aplicação VueJS, você pode seguir os seguintes passos:
Crie um componente para o formulário em um arquivo separado. Esse componente será responsável por lidar com as interações do usuário no formulário e enviar os dados para a API.
Dentro do componente, crie um objeto de dados que conterá todas as informações do formulário, incluindo o tipo de log selecionado, CPF, código etc. Cada item no objeto de dados deve ser inicializado com um valor vazio ou nulo.
Crie uma seção do formulário para o tipo de log selecionado, utilizando um elemento select para apresentar as opções. A opção selecionada deve ser armazenada no objeto de dados.
Crie seções para cada tipo de log. Essas seções só devem ser exibidas quando o tipo de log correspondente é selecionado. Use diretivas de v-if ou v-show do VueJS para controlar a exibição dessas seções.
Dentro de cada seção, adicione campos para os dados específicos de cada tipo de log. Para o exemplo dado, crie um campo para o CPF na seção do Cadastrador e um campo para o código na seção do Fau.
Adicione validação aos campos obrigatórios usando as diretivas de validação do VueJS ou bibliotecas de validação como o Vuelidate.
Quando o formulário estiver preenchido corretamente, você pode enviar os dados para a API através de uma requisição HTTP. Você pode utilizar a biblioteca axios para fazer a requisição.
Exiba uma mensagem de sucesso ou erro para o usuário com base na resposta da API.
Lembre-se de considerar casos de erro na requisição, como problemas de conexão ou resposta da API com erro.
Espero que esses passos sejam úteis para criar o formulário desejado. Lembre-se de consultar a documentação do VueJS e outras bibliotecas que você pode utilizar para tornar o desenvolvimento mais fácil e rápido.
Documentação Vuejs => Clique aqui