Exercício – Adicionar manipuladores de eventos

  • 4 minutos

Agora, atualize o aplicativo para adicionar um manipulador de eventos para um botão recém-criado no formulário. O botão alternará o sinalizador booking.completed para atualizar a exibição.

Adicionar a função

Comece adicionando ao aplicativo Vue:

  1. No Visual Studio Code, abra o arquivo index.js.

  2. Na linha após o comentário TODO: Add methods, adicione o código a seguir para criar a função bookCabin. Essa função é o manipulador de eventos.

    // TODO: Add methods
methods: {
    bookCabin() {
        this.booking.completed = true;
    }
}

    Observe que this está associado ao aplicativo atual. Ele fornece acesso ao objeto booking dos dados.

Adicionar o botão ao formulário

Agora, adicione o botão ao formulário:

  1. No Visual Studio Code, abra o arquivo index.html.

  2. Na linha após o comentário TODO: Add button later, adicione o HTML a seguir para criar o botão.

    <!--TODO: Add button later -->
<button class="button" type="button" @click="bookCabin">Book now!</button>

    Observe que o atributo @click está associado à função bookCabin criada anteriormente.

Testar a página

Agora, você pode testar a página atualizada!

  1. Salve todos os arquivos selecionando Arquivo>Salvar tudo.
  2. Abra a paleta de comandos selecionando Ctrl+Shift+P. Em um Mac, selecione Cmd+Shift+P.
  3. Verifique se o Live Server está em execução digitando Live Server e selecionando Live Server: Abrir com o Live Server.
  4. Abra um navegador e acesse http://localhost:5500. A página exibe um botão.
  5. Preencha o formulário e selecione o botão. Observe que o formulário desaparece da página.

Você configurou um manipulador de eventos no Vue.