VUE JS: Criando componente lista de telefones

Neste post gostaria de mostrar um forma de criar um componente para listar telefones com VUE. Este exemplo pode ser utilizado dentro de um formulário para agrupar diversos telefones de um cliente ou pessoa por exemplo:

O resultado deste componente é um array de telefones que pode ser enviado ao seu back-end e relacionado a algum registro de pessoa, empresa ou algo da sua necessidade. Em caso de edição para exibição dos registros já salvos pode ser utilizado a função mounted e carregar todos os telefones para dentro do componente.

O resultado do código acima com Bootstrap é algo como a imagem abaixo:

Um exemplo do componente funcionando podeser visto em:
https://jsfiddle.net/backos/kwcrr9bq/

Comentários

Postagens mais visitadas deste blog

Migrando repositório TFS para GIT

Chega o momento em que decidimos migrar do TFS para GIT por 'N' motivos e benefícios que esta migração pode trazer. Caso você tenha uma repositório de longa data e queira manter o histórico de checkins, o git-tfs auxilia nesta tarefa. Uma das minhas formas preferidas para instalar é através do chocolatey . Com o chocolatey instalado em sua máquina basta abrir o powershell em modo admin e digitar: cinst GitTfs No powershell para clonar o repositório TFS para seu repositório git você deve digitar o seguinte comando: git tfs clone http : //meutfs.com $/diretoriotfs c : /diretorio-alvo-clone --branches=all -u=CORP\Usuario -p=****** Para mais opções de comando segue link do github do projeto.

Upload de arquivos sem refresh na página

Olá. Algumas vezes temos a necessidade de enviar dados sem dar refresh na página. Mas isto torna-se mais engenhoso quando entre estes dados temos arquivos. Para solucionar este cenário temos uma facilidade com jQuery. Para enviar arquivos é necessário trabalhar com os parâmetros de ajax contentType e processData. No exemplo abaixo temos uma função genérica que servirá tanto para formulário com ou sem imagem: $(form).on('submit', function () { var data; var contentType = "application/x-www-form-urlencoded"; var processData = true; if ($(this).attr('enctype') == 'multipart/form-data') { data = new FormData($(this).get(0));//seleciona classe form-horizontal adicionada na tag form do html contentType = false; processData = false; } else { ...

Dica: Extensão Indentar código VUE Visual Studio Code

Olá Por muitas é necessário um atalho para formatar o seu código fonte no editor de texto. Para formatação de HTML, CSS, JS e afins no visual studio code você pode utilizar o: HTML Snippets Mas esta extensão acima não formata arquivos de template .vue . Para formatar este tipo de arquivos é necessário instalar alguma outra extensão. Entre as que busquei a que faz o serviço da melhor forma atualmente utilizando o atalho alt+shift+f é o plugin ventur: Vetur Este plugin é muito bom mesmo. Facilitou bastante a formatação de fontes em templates .vue. É isso espero que ajude;)

Jozimar Back's codding blog

Pesquisar este blog