[PROMOÇÃO] Assine com + 30% de desconto ANUAL MENSAL (últimas horas)

Mascara Vue JS

[Concluído]

Roberto Noya
Criador Roberto Noya 28/02/2020

Olá Carlos,

Estou trabalhando com Vuejs e preciso de uma dica sobre máscaras de formatação.

Eu consegui aplicar a máscara do site abaixo dentro de um projeto em Vuetify:

https://vuejs-tips.github.io/vue-the-mask/

O codigo é bem simples:

<v-text-field  v-model="partner.telefone"  label="Telefone" v-mask="['(##) ####-####', '(##) #####-####']"> </v-text-field>

Da forma como está ao cadastrar um numero de telefone ele formata corretamente combinando 10 e 11 números.

Meu problema está na exibição de um numero já cadastrado. Não faço ideia como usar a mascara.

Quando eu trabalhava com blade eu criava na MODEL um "public function setTelefoneAttribute($value)" e aqui eu formatava o numero e enviava para view. Entretanto, isso gera erro 500 (Internal Server Error).

Alguma dica?

 

 

 

 

 

 

 

 

Criador Roberto Noya 28/02/2020

Errei ao digitar o comando que formata no blade o numero de telefone e envia para View exibir é "getTelefoneAttribute" e não "setTelefoneAttribute"

Roberto Noya
Manager Carlos Ferreira 28/02/2020

Olá, Roberto!
Tudo bem?

O valor de "partner.telefone" é apenas os números do telefone, certo?
Já usei esse package em um projeto, e ele comportou dessa forma, foi a mameneira mais fácil de lidar com os dados, ele me retornava os valores sem a mascara.

Seu objetivo é retornar formatado, certo? Mas, qual é o valor atual que está no banco?

Carlos Ferreira
Criador Roberto Noya 28/02/2020

No banco encontramos das seguintes maneiras: "11985583245" ou "1130457898"

 

 

Roberto Noya
Criador Roberto Noya 28/02/2020

Preciso exibir formatado os numeros. O Vuetify possui um recurso fácil de mascara porém só consigo usá-lo quando o objeto é declarado em data ().

Entretanto, meu objeto está declarado na props e estou perdido.

 

props: {

        partner: {

            require: false,

            type: Object|Array,

            

            default: () => {

                return {

                    id: '',

                    nome: '',

                    email: '',

                    telefone: '',

                }

            }

        },

 

 

Roberto Noya
Manager Carlos Ferreira 28/02/2020

A forma como o valor está salvo no banco está correto.

O que precisa é pegar o valor que recebeu da props partner e passar para data, certo?

Pode criar um watch:
data () {
    return {
        partnerData: {
            id: '',
            nome: '',
            email: '',
            telefone: '',
        }
    }
},

watch: {
    partner (values) {
        this.partnerData = values
    }
}

O v-model do form precisa estar com partnerData

Carlos Ferreira
Criador Roberto Noya 28/02/2020

Olá Carlos,

Muito interessante esse recurso WATCH.

Eu tentei aplicar sua sugestão mas ao tentar editar as informações ele não carrega no formulário os dados quando eu utilizo a variável partnerData no v-model. Nãoo aparece erro, apenas não exibe a informação no form pois acredito que o comando "watch' não está passando os valores para "props" 

props: {
        partner: {
            require: false,
            type: Object|Array,
            
            default: () => {
                return {
                    id: '',
                    nome: '',
                    email: '',
                    telefone: '',
                }
            }
        },
        updating: {
            require: false,
            type: Boolean,
            default: false,
        }
    },

    data () {
        return {
             partnerData: {
                id: '',
                nome: '',
                email: '',
                telefone: '',
            },

            watch: {
                partner (values) {
                    this.partnerData = values
                }
            },

 

 <v-text-field
                outlined
                v-model="partnerData.nome"
                :rules="nomeRules"
                label="Nome"
                
                required
            >
            </v-text-field>

            
Roberto Noya
Manager Carlos Ferreira 28/02/2020

Você tem esse projeto no GitHub?

Você não consegue alterar um valor de props no Vue.js, a única forma seria enviando um emit para o component pai, e ele mesmo alterar.

Sobre o watch, faz um console log, pra analisar se está passando nele:
partner (values) {
    console.log('ops')
    console.log(values)
}

Carlos Ferreira
Criador Roberto Noya 28/02/2020

Ainda não está no git mas vou colocar.

O projeto está no inicio onde partners é o primeiro CRUD.

Eu fiz o teste do alert dentro do watch e não funciona. Ou seja, o watch não sendo acionado

 

Roberto Noya
Criador Roberto Noya 28/02/2020

Segue o link do projeto no git hub

https://github.com/robertotnoya/financiamento

Roberto Noya
Criador Roberto Noya 28/02/2020

Olá Carlos,

Consegui resolver. Deu certo!

Muito Obrigado!

Roberto Noya
Manager Carlos Ferreira 28/02/2020

Que bom que deu certo amigo, parabéns!

Abs;

Carlos Ferreira
Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!