How to bind a Vue.js variable without using the keys

Question

How to bind a Vue.js variable without using the keys

Navigation

#1 by (1 votes)

0

I'm starting to work now with Laravel 5 + Vue.js and I'm having trouble with loading from my page. My Vue variables are exposed at startup and are only rendered after javascript loads. My example is as follows:

// 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><formid="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>

I need to know if there is any way for me to make the declaration of my <small/> which displays the error messages to the user but without using the keys, so no matter how long the screen takes to load I still have a better UX ..

vue.js vue.js-2

asked by anonymous 29.05.2018 / 14:47

1 answer

Angular 2 Error HTTPResponse not found Language for Backend and another on Frontend?

score 1 · Answer 1

Oops, I ran into the net shortly after inserting the question here. The solution is the v-text directive as shown in this link thus getting my 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>