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… 
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 interesses e comoNosConheceu. 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á!
