0

Estou começando a trabalhar agora com Laravel 5 + Vue.js e estou tendo problemas em relação ao loading da minha página. As minhas variáveis do Vue ficam expostas ao iniciar e só são renderizadas após o javascript carregar. Meu exemplo é o seguinte:

// adicionei o `setTimeout` somente para simular o problema
setTimeout(function(){
  var app = new Vue({
    el: '#foo',
    data: {
      form: {
        email: ''
      },
      messages: {}
    }
  });
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<form id="foo" v-on:submit.prevent>
    <div>
        <label>E-mail</label>
        <input type="text" v-model="form.email" />
        <small v-if="messages.email">@{{messages.email}}</small>
     </div>
</form>

Preciso saber se há alguma forma de eu fazer a declaração do meu <small/> que apresenta as mensagens de erro ao usuário mas sem usar as chaves, assim independente do tempo que a tela demorar para carregar ainda tenho uma melhor UX..

1 Resposta 1

1

Opa, fuçando na net esbarrei logo após inserir a questão aqui. A solução é a diretiva v-text como mostra nesse link ficando assim meu html:

<form id="foo" v-on:submit.prevent>
    <div>
        <label>E-mail</label>
        <input type="text" v-model="form.email" />
        <small v-if="messages.email" v-text="messages.email"></small>
     </div>
</form>
2

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 .