1

Eu tenho um formulário, onde os campos de telefone é dinâmico para que o usuário possa adicionar quantos números quiser.

Mas quando eu clico no botão para adicionar novo item, esse item criado aparece sem formatação. Sem contar que ainda da um bug que desce a tela toda.

Veja o que acontece no gif abaixo:

inserir a descrição da imagem aqui

Eu tentei inserir o código direto aqui, mas não estava aparecendo a formatação do Boostrap, então coloquei no codepen:

https://codepen.io/anon/pen/qJYwQL

Eu sei que isso pode acontecer por o vue.js tentar adicionar um item depois que a tela ja foi renderizada, eu lembro que o jquery tinha este mesmo problema, até lançarem o método live que mantinha a formatação com itens dinâmicos.

Será que é possível corrigir este problema no vue?

2 Respostas 2

2

O problema não é do VueJS, o problema é que o Bootstrap não consegue "enxergar" o novo elemento, para isso é necessário (re)iniciar o Bootstrap Material Design toda vez que você adicionar um novo elemento.

Uma forma de fazer isso é criando uma diretiva customizada, dessa forma toda vez que houver uma alteração no elemento, a diretiva será responsável por reiniciar o Bootstrap.

JavaScript:

Vue.directive('update-material-design', {
  inserted(el) {
    $(el).bootstrapMaterialDesign();
  }
})

HTML:

<div class="row clearfix" v-for="(row, index) in rows" v-update-material-design>

Pronto! Agora toda vez que um campo for adicionado dentro da div acima, a diretiva update-material-design será executada.


Exemplo Completo:

$(document).ready(function() {
  $('body').bootstrapMaterialDesign();
});

var telsadd = new Vue({
  el: "#telsadicionais",
  data: {
    rows: [{
      teltipo: "celtim",
      telddd: "15",
      telnumber: "3429-2410"
    }, {
      teltipo: "whatsapp",
      telddd: "34",
      telnumber: "46536546"
    }]
  },
  methods: {
    addRow: function() {
      this.rows.push({
        teltipo: "",
        telddd: "13",
        telnumber: ""
      });
    },
    removeElement: function(index) {
      this.rows.splice(index, 1);
    }
  }
});

Vue.directive('update-material-design', {
  inserted(el) {
    $(el).bootstrapMaterialDesign();
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css" rel="stylesheet"/>


<div id="telsadicionais">
  <div class="row clearfix" v-for="(row, index) in rows" v-update-material-design>
    <div class="col-sm-4">     
      <div class="form-group">
        <div class="form-line">
          <select name="teltipo[]" class="form-control show-tick" title="Tipo" v-model="row.teltipo">
            <option value="fixo">Fixo</option>
            <option value="celvivo">Celular - Vivo</option>
            <option value="celclaro">Celular - Claro</option>
            <option value="celtim">Celular - Tim</option>
            <option value="celoi">Celular - Oi</option>
            <option value="celnextel">Celular - Nextel</option>
            <option value="celoutros">Celular - Outro</option>
            <option value="whatsapp">Whatsapp</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-sm-1">
<div class="form-group">
    <label for="ddd" class="bmd-label-floating">DDD</label>
    <input type="text" name="telddd[]" class="form-control" maxlength="2" id="ddd" v-model="row.telddd">
  </div>
    </div>
    <div class="col-sm-5">
<div class="form-group">
    <label for="telnumber" class="bmd-label-floating">Numero</label>
    <input type="text" name="telnumber[]" class="form-control" maxlength="12" id="telnumber" v-model="row.telnumber">
  </div>
    </div>
    <div class="col-sm-2">
      <a class="btn btn-primary" v-on:click="removeElement(index);" style="cursor: pointer">Remove</a>
    </div>
  </div>
  <button class="btn btn-primary" @click="addRow">Adicionar</button>
</div>

1
  • Obrigada, funcionou perfeitamente. Uma solução simples e fácil. 19/10/2018 às 23:14
1

O Vue não perde a formatação de itens adicionados dinâmicamente, porém existem algumas considerações importantes que são necessárias fazer com relação ao seu código:

1- É altamente 'contra-indicado' o uso de jQuery em projetos utilizando Vue ou React ou Angular, etc... por N motivos.

2- Pelo link que passou está utilizando o Bootstrap4 com jQuery, sendo que há a versão para Vue que é a que estou utilizando na resposta.

3- Isto posto, basta você colocar um label para a tag select como fiz no exemplo, ou, dar um margin-top no select com CSS como fiz no exemplo com os botões remover.

var telsadd = new Vue({
  el: "#telsadicionais",
  data: {
    rows: [{
      teltipo: "celtim",
      telddd: "15",
      telnumber: "3429-2410"
    }, {
      teltipo: "whatsapp",
      telddd: "34",
      telnumber: "46536546"
    }]
  },
  methods: {
    addRow: function() {
      this.rows.push({
        teltipo: "",
        telddd: "13",
        telnumber: "992300312"
      });
    },
    removeElement: function(index) {
      this.rows.splice(index, 1);
    }
  }
});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="telsadicionais">
  <div class="row clearfix" v-for="(row, index) in rows">
    <div class="col-sm-4">     
      <div class="form-group">
        <div class="form-line">
          <label>Selecione a operadora</label>
          <select name="teltipo" class="form-control show-tick" title="Tipo" v-model="row.teltipo">
            <option value="fixo">Fixo</option>
            <option value="celvivo">Celular - Vivo</option>
            <option value="celclaro">Celular - Claro</option>
            <option value="celtim">Celular - Tim</option>
            <option value="celoi">Celular - Oi</option>
            <option value="celnextel">Celular - Nextel</option>
            <option value="celoutros">Celular - Outro</option>
            <option value="whatsapp">Whatsapp</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-sm-1">
<div class="form-group">
    <label for="ddd" class="bmd-label-floating">DDD</label>
    <input type="text" name="telddd[]" class="form-control" maxlength="2" id="ddd" v-model="row.telddd">
  </div>
    </div>
    <div class="col-sm-5">
<div class="form-group">
    <label for="telnumber" class="bmd-label-floating">Numero</label>
    <input type="text" name="telnumber[]" class="form-control" maxlength="12" id="telnumber" v-model="row.telnumber">
  </div>
    </div>
    <div class="col-sm-2">
      <a class="btn btn-danger" v-on:click="removeElement(index);" style="cursor: pointer;margin-top:30px;">Remove</a>
    </div>
  </div>
  <button class="btn btn-primary" @click="addRow">Adicionar</button>
</div>

Segue alguns links de frameworks CSS para utilização com Vue.js

2
  • Obrigada por responder. No momento eu não posso mudar os frameworks que ja estão sendo usados no projeto. A outra resposta que selecionei como correta, me ajudou melhor neste caso sem precisar mudar das bibliotecas. Mas mesmo assim adorei as suas indicações. Num novo projeto irei utilizar as suas dicas. Mais uma vez obrigada 19/10/2018 às 23:17
  • 1
    Por nada Samantha, jóia que gostou dos links.
    – LeAndrade
    19/10/2018 às 23:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .