6. Interligações em formulários (Introdução ao Vue.js)

Published in

rgblog

4 min readMay 15, 2020

Nesse tópico, vamos aprender como realizar interligações em formulários.

Se você caiu de paraquedas aqui, saiba que esse post faz parte de uma série de tópicos sobre como aprender os conceitos básicos do Vue.js criando um Gerador de Memes.
Além disso, se você ficou com dúvidas sobre como resolver o desafio do 5. Interligações de atributos. Segue o código do desafio resolvido no Github para você entender :)

Interligações em formulários

Vamos aprender como realizar interligações em formulários.

Objetivo

Vamos adicionar um input que será utilizado para escrever sobre a imagem e realizar essa conexão com o que foi digitado.

Código inicial — Criar o CSS

Vamos criar dentro da pasta assets/css/ um arquivo chamado style.css e colocar o seguinte código

assets/css/style.css

Incluir meta tags e bootstrap 4

E no nosso index.html, vamos alterar o conteúdo dentro do head para incluir as meta tags, o tema lux do bootstrap 4 e nosso css.

https://bootswatch.com/lux/

Bootstrap 4 — Theme Lux

Pode ficar a vontade para trocar de tema do Bootstrap 4 tem várias opções no https://bootswatch.com/

Customizar layout e adicionar input

Também vamos alterar todo nosso conteúdo dentro do body pelo seguinte

Se tudo deu certo o resultado vai ser esse do Layout

Agora precisamos também adicionar a tag  acima da imagem que vai receber o Texto do input

Adicionar tag  acima da tag <img>

Problema

Como fazer a conexão entre o que digitamos no input e o texto acima da imagem?

Solução

Precisamos fazer uma interligação entre o input e o elemento acima da nossa imagem usando a diretiva v-model do Vue.

Diretiva v-model

Você pode usar a diretiva v-model para criar interligações de mão dupla (two-way data binding) entre os dados e elementos como input, textarea e select de formulários.

Isso significa quando você digitar algo no input vai ser alterado em sua view também.

Então vamos fazer essa conexão em três passos

No nosso main.js vamos adicionar abaixo do objeto image um objeto text: { top: '' } que vai receber o que digitarmos no input

2. No nosso index.html no lugar do texto estático Top Text vamos colocar a expressão{{ text.top }} que logo vai estar conectado com o input

3. Nosso input precisa saber que estamos conectando os dados do text.top com ele, então vamos usar a diretiva v-model e especificar o valor dela que será v-model="text.top"

Resultado

Quando você digitar algo no input ele vai aparecer também na imagem ao lado.

Vamos também agora alterar nossa fonte.

Alterar a fonte

Escolher uma fonte diferente para o texto do meme — Google Fonts.

Alterar a fonte — Passion One

No meu caso eu utilizei a fonte Passion One, mas você pode escolher outra se quiser no Google Fonts.

Basta adicionar dentro da tag <head> o link para fonte no nosso index.html

adicionar no <head>

E também ir na classe .text e adicionar o font-family: 'Passion One' ou o nome da fonte que você escolheu.

Resultado

Agora tá melhor com essa fonte. :D

6. Interligações em formulários — (O que aprendemos?)

A diretiva v-model permite utilizar interligações de mão dupla (two-way data binding).

6º DESAFIO

Adicionar um input do tipo texto, abaixo do top input text com o placeholder = Bottom text.
Adicionar uma propriedade chamada bottom, dentro do objeto text.
Adicionar uma tag abaixo da imagem com a classe "fixed-bottom text".
Realizar o two-way data binding v-model entre o input e essa tag