Teste adicionar telefone

teste para adicionar lista telefone

by backos

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<div id="vue-lista-telefone">
<button class="btn btn-primary col-md-12" @click="adicionar">
Adicionar Telefone
</button>
<div v-for="telefone in telefones" :key="telefone.id" class="form-inline">
  <input type="hidden" v-model="telefone.id" />
  <div class="form-group col-xs-3">
    <input class="form-control mb-2 mr-sm-2 mb-sm-0" type="tel" placeholder="DDD" data-tel="" v-model="telefone.ddd" name="Telefone[Ddd]" value="" required="" maxlength="2">
  </div>
  <div class="form-group col-xs-3">
    <input class="form-control mb-2 mr-sm-2 mb-sm-0" type="tel" data-tel="" v-model="telefone.numero" name="Telefone[Numero]" value="" placeholder="Telefone" required="" maxlength="9">
  </div>
  <div class="form-group col-xs-3">    
    <select class="custom-select mr-sm-2"  v-model="telefone.tipo">
     <option selected>Escolha tipo...</option>
     <option value="0">Principal</option>
     <option value="1">Celular</option>
     <option value="2">Residêncial</option>
     <option value="3">Trabalho</option>
     <option value="4">Comercial</option>
     <option value="5">Outros</option>
    </select>
  </div>
  <div class="form-group col-xs-3">
    <select class="custom-select mr-sm-2"  v-model="telefone.situacao">
    <option selected>Escolha situação...</option>
     <option value="0">Ativo</option>
     <option value="1">Inativo</option>
    </select>
  </div>
  <button class="btn btn-danger col-xs-3" @click="remover(telefone)">Remover</button>  
</div>
</div>

JavaScript

new Vue({
	el:'#vue-lista-telefone',
  data:{
  	telefones:[]
  },
  methods:{
  	adicionar:function(){
    var id = this.telefones.length+1;
     this.telefones.push({
     		id: id,
        ddd:'',
        numero:'',
        tipo:0,
        situacao:0
     });
    },
    remover:function(telefone){
    	console.log(telefone);
    	this.telefones.splice(this.telefones.indexOf(telefone),1);
    }
  }
  });