E aí, jovem, beleza? Depois na nossa última aula sobre Vue.js diretiva v-for, hoje vamos falar de Vue.js diretiva v-model. Ainda não conhece muito? Então, presta atenção nesse tutorial, que você vai ficar fera no assunto.

Segue uma vídeo aula top pra você que curte curso em vídeo e não gosta muito de ler… 😂

Play Video

v-model é uma diretiva que você vai usar muito em formulários, dentro do input, textarea, checkbox, radio button, entre outros. Na prática, é bem simples.

Assim como vimos nas aulas anteriores, eu tenho o meu html padrão, e vou criar, como exemplo, um campo input. Nesse campo, é que usaremos a diretiva v-model. Não se esqueça de utilizar sempre o prefixo v-, que é o que identifica a diretiva. E essa diretiva recebe  uma variável. Nesse caso, também como exemplo, vou colocar como nome, ok?

Por se tratar de uma variável, preciso declarar dentro de data. E vou iniciar essa variável com um valor vazio, ok, jovem?

    
        <body>
            <div id="app">
                <input type="text" v-model="nome">
            </div>
            
            <script>
                var app = new Vue({
                    el: '#app',
                    data: {
                        nome: '',
                    },
                });
            </script>
        </body>
    

Se você executar o código acima verás apenas um campo de texto na tela e nada de novo. Mas o Vue.js está trabalhando pelos bastidores com essa diretiva v-model. Vamos então experimentar imprimir essa variável na tela, eu vou usar o {{ nome }} logo após o input como segue abaixo.

Se eu não expliquei antes me perdoe, mas essa denotação com duas chaves antes e depois da variável a forma que que Vue.js usa para imprimir variáveis na tela.

    
        <div id="app">
            <input type="text" v-model="nome">
            {{ nome }}
        </div>
    

Agora experimente digitar o seu nome no campo.

💥 Booom! O Vue.js vai dá um update instantâneo na sua variável.

Agora para efeito de experimento, altere o valor da variável nome lá no código e execute novamente a página e veja o que acontece.

Isso mesmo, o Vue.js vai preencher o input com o valor definido e se você digitar qualquer coisa o valor será atualizado automaticamente.

Isso a gente chama de Two-way Binding, ou seja essa variável nome tem uma ligação bidirecional. De qualquer lado que você alterar, será replicado do outro lado. Ou seja, é o que sempre falo que o Vue.js é reativo, não é fantástico?

Para você ter uma ideia de como usar o v-model em outros campos, vou criar um formulário de pesquisa. Assim, fica mais fácil de você visualizar em um exemplo mais real do nosso dia-a-dia. Vamos colocar o nome, que já temos, e declarar as variáveis telefone, novidades, interesses e comoNosConheceu. E vou imprimir cada uma dessas variáveis embaixo do formulário.

O código vai ficar assim:

    
        <body>
            <div id="app">
            <label for="">Nome</label><br>
            <input type="text" v-model="nome">
            
            <br><br>
            <label for="">Telefone</label><br>
            <input type="text" v-model="telefone">
            
            <br><br>
            <label for="">Deseja receber nossas novidades?</label><br>
            <input type="radio" v-model="novidades"> Sim
            <input type="radio" v-model="novidades"> Não
            
            <br><br>
            <label for="">Interesses</label>
            <input type="text" type="checkbox" v-model="interesses"> Futebol <br>
            <input type="text" type="checkbox" v-model="interesses"> Formula 1 <br>
            <input type="text" type="checkbox" v-model="interesses"> Corrida <br>
            
            <br><br>
            <label for="">Como nos conhece?</label>
            <select v-model="comoNosConheceu">
            <option value="">Escolha</option>
            <option value="Google">Google</option>
            <option value="TV">TV</option>
            <option value="Revista">Revista</option>
            </select> 
            
            <br><br>
            
            <hr>
            
            Nome: {{ nome }} <br>
            Telefone: {{ telefone }} <br>
            Novidades: {{ novidades }} <br>
            Interesses: {{ interesses }} <br>
            Como nos conheceu? {{ comoNosConheceu }} <br>
            </div>
            
            <script>
                var app = new Vue({
                    el: '#app',
                    data: {
                        nome: '',
                        telefone: '',
                        novidades: '',
                        interesses: '',
                        comoNosConheceu: ''
                    },
                });
            </script>
        </body>
    

Então, para você ficar ninja em Vue.js, vamos recapitular.
Temos um formulário html simples, e, em cada elemento desse formulário eu tenho a minha diretiva v-model. Dentro do v-model eu tenho a minha variável, onde eu quero capturar o valor que vai ser digitado pelo usuário. Ou seja, cada variável vai receber o valor que o usuário definir.

Na prática, os campos nome, telefone e novidades funcionam normalmente como já vimos acima.

Porém, percebemos um erro em interessescomoNosConheceu. Se você executou o código viu que o Vue.js não pegou os valores corretos dessas duas variáveis.

O que aconteceu foi que, conforme vemos no código abaixo, precisamos declarar os valores de cada input, o atributo value, uma vez que o usuário não está inserindo valor no campo. Ele apenas está apenas selecionando e, ao selecionar, precisamos indicar qual valor vai ser atribuído. O mesmo vale para o checkbox.

    
        <label for="">Deseja receber nossas novidades?</label><br>
        <input type="radio" value="Sim" v-model="novidades"> Sim
        <input type="radio" value="Não" v-model="novidades"> Não
        
        <br><br>
        <label for="">Interesses</label>
        <input type="text" type="checkbox" value="Futebol" v-model="interesses"> Futebol <br>
        <input type="text" type="checkbox" value="Fórmula 1" v-model="interesses"> Fórmula 1 <br>
        <input type="text" type="checkbox" value="Corrida" v-model="interesses"> Corrida 
    

Por ser checkbox, a minha variável precisa ser uma array, já que podemos ter múltiplas escolhas. Vamos então tirar de string e colocar como array.

    
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    nome: '',
                    telefone: '',
                    novidades: '',
                    interesses: [], // Deve ser um array
                    comoNosConheceu: ''
                },
            });
        </script>
    

Como você pode perceber, jovem, é bem simples e fácil, mas precisamos prestar bastante atenção no checkbox e no radio button, para não esquecermos de colocar o valor e correr o risco do formulário não funcionar, certo?

Bom, a diretiva v-model é isso aí. Super simples, muito útil e você usa praticamente em todos os seus projetos.

Agora, fico por aqui. Se você tiver alguma dúvida, basta comentar aí em baixo que respondo.

Um grande abraço, e nos vemos no próxima capítulo, que vamos aprender sobre a diretiva v-bind.

Até lá!