Formulário de contato no Framework Vue.js

Oi Sheila, nesse seu formulário cada input é um componente separado? Me explica mais ou menos como você está fazendo esse formulário pra poder pensar em uma solução.

Oi, Wanderson boa noite!

Isto são componentes autocomplete e select. Gostaria de quando a pessoa selecionar ou digitar algum valor no input ficasse as bordas do input verdes, informando que está preenchido. Tem alguma solução pra isto?

Desde já agradeço sua atenção.

Obrigada e abraços

Talvez este link seja útil:

https://stackoverflow.com/questions/51195581/vuejs-change-border-color-of-the-input-if-input-is-already-filled-in/51401234

Oi Sheila, conseguiu avançar com a sugestão que o Daniel deu?

Olá bom dia, Daniel e Priscila! Tudo bem ?

Não funcionou não, ainda não conseguir solucionar meu problema.

Obrigada pela ajuda.

Abraços

Oi Sheila, tudo bem? Desculpa a demora. Bom, consultei a documentação por um exemplo simples que pudesse te ajudar. Olha essa página: https://vuejs.org/v2/guide/class-and-style.html

O que tem descrito ali?

Temos o v-bind:class que troca as classes dinamicamente de acordo com estado do componente. O trecho mais específico é esse:

<div v-bind:class="{ active: isActive }"></div>

A classe active será aplicado a div caso o isActive do componente seja true. Bom, ai só precisamos adaptar o exemplo, porem, temos um outro ponto, isso funciona pra elementos pré preenchidos, mas acredito que precisamos alterar o estado ouvindo o evento de blur, quando o elemento perde o foco.

Neste caso precisamos do v-on, que parece muito o onClick, onBlur... E você pode ler mais nessa página: https://vuejs.org/v2/guide/events.html

Então, vamos ver um pouco de código combinando tudo pra ficar claro. Primeiro o "html":

<div v-bind:class="{ filled: isFilled }" v-on:blur="checkField"></div>

E no JS do componente teremos algo do tipo:

data : {
    isFilled: false
},
methods: {
    checkField : function(){
        this.isFilled = this.value.lenght ? true : false;
    },
}

Foi o que consegui bolar lendo a documentação. Claro, você que já estudou um pouco mais do que eu, pode saber melhor como fazer. Aqui é só um esboço, precisa testar.

Desculpa a demora, espero que ajude!

Olá, boa tarde Wanderson!

Vou testar aqui, qualquer coisa aviso.

Obrigada ,

Abraços.

Algum progresso Sheila?

Olá, bom dia Wanderson!

Tudo bem ?

Sim conseguir ... Muito Obrigada pela suas dicas, me ajudaram muito.

Abraços.

Ótimo Sheila! Fico feliz que tenha conseguido. Só tenho um pedido, lembra de marcar o tópico como resolvido quando conseguir resolver o problema?

É só ir até a resposta que te ajudou e clicar em "marcar como solução".