Prompt completo
"Desenvolva um **tutorial interativo passo a passo** para desenvolvedores front-end que demonstre a criação de um formulário de feedback dinâmico e reativo em Vue.js, otimizado para acessibilidade (WCAG 2.1 AA) e validação em tempo real. O tutorial deve abordar: 1. **Estrutura do componente Vue (`.vue`)**: Como organizar `template`, `script` e `style` para um formulário complexo. 2. **Gerenciamento de estado**: Utilização de `v-model` e `data` para capturar e atualizar os dados dos campos (nome, email, tipo de feedback - dropdown, mensagem - textarea, anexo de arquivo opcional). 3. **Validação de formulário**: Implementação de validação assíncrona para o email (verificando formato e disponibilidade simulada de domínio), validação síncrona para campos obrigatórios e comprimento mínimo/máximo, e exibição clara de mensagens de erro. 4. **Acessibilidade (WCAG 2.1 AA)**: Uso de atributos ARIA (ex: `aria-describedby`, `aria-invalid`), `label` corretamente associadas, e navegação por teclado (`tabindex`). 5. **Reatividade e feedback visual**: Mostrar como o formulário se adapta dinamicamente às interações do usuário (ex: desabilitar botão de envio até que o formulário seja válido, exibir spinners durante validação assíncrona, mensagens de sucesso/erro após o envio). 6. **Simulação de envio de dados**: Como simular uma requisição HTTP (`axios` ou `fetch`) para um backend, tratando sucesso e erro na resposta. 7. **Testes unitários (Jest/Vue Test Utils)**: Exemplos básicos de como testar a renderização do componente, a interação do usuário e a lógica de validação. O tutorial deve ser prático, focado em código, e incluir explicações claras sobre as decisões de design e as melhores práticas do Vue.js para formulários robustos e amigáveis ao usuário."
Tags relacionadas
Vue
Casos de uso práticos em Vue
gerado-automaticamente
Como usar este prompt
1
Clique no botão "Copiar" para copiar o prompt para sua área de transferência
2
Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)
3
Cole o prompt e adapte conforme necessário para seu contexto específico
Outros prompts de Vue
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
2 usos
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
4 usos
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
4 usos