Mascara Vue JS
[Concluído]
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?
Errei ao digitar o comando que formata no blade o numero de telefone e envia para View exibir é "getTelefoneAttribute" e não "setTelefoneAttribute"
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?
No banco encontramos das seguintes maneiras: "11985583245" ou "1130457898"
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: '',
}
}
},
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
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"
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)
}
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
Segue o link do projeto no git hub
Olá Carlos,
Consegui resolver. Deu certo!
Muito Obrigado!
Que bom que deu certo amigo, parabéns!
Abs;
Precisa estar logado para conseguir responder a este ticket!
Clique Aqui Para Entrar!