Level 14
@Eco012390 Yeah, that's "a thing". Check out v-cloak: http://vuejs.org/api/#v-cloak
1 like
Mar 30, 2016
4
Level 7
Vue.js and laravel blade?
I'm learning Vue.js in my laravel 5.2 folder and I noticed that wherever I refresh the page it shows the data name first before outputting the actual data. I suspect that it is because of blade @ within {{ }} do you think this is the problem? or not?
This is the code I used.
<div id="app">
<h1> @{{ message }} </h1>
</div>
<script src={{ asset('js/vendor.js') }}></script>
<script>
new Vue ({
el: '#app',
data: {
message: 'hellow world'
}
});
</script>
what is the solution to this problem? I need your help guys T_T
Level 6
It isn't really that much of a problem. It happens because Vue isn't loaded until after the page renders.
Luckily Vue has this already built in, you will want to read about http://vuejs.org/api/#v-cloak
A small example of the App fading in after it has loaded.. You don't need to fade it, but you get the idea http://codepen.io/tutelagesystems/pen/bEeYdV
1 like
Level 7
thanks everyone, so where do I put this v-cloak thing?
Level 6
To clarify for anyone (like me) stumbling across this: You need to add the following to your CSS...
[v-cloak] {
display: none;
}
Then on all Vue elements/components in your html/blade files...
// from
<div class="someclass" v-model="example"></div>
// to
<div v-cloak class="someclass" v-model="example"></div>
The element will initially have 'display:none' applied, then when Vue renders it will remove the attribute causing it to show on the page
1 like
Please or to participate in this conversation.