My strategy is usually to have a
<div
style="positon:fixed;top:0;left:0;width:100%;height:100vh;z-index:10000000"
v-if="!loaded"> some splash image </div>
and then after vue = new Vue ({data:{loaded:false}}) set vue.loaded = true;
On Monday, 26 June 2017 08:35:45 UTC-5, Anthony wrote:
>
> Change:
>
> <div id="vue">
>
> To:
>
> <div v-cloak id="vue">
>
> and add the following CSS rule:
>
> [v-cloak] {
> display: none;
> }
>
> That will cause the div to remain hidden until after the Vue instance has
> finished compiling.
>
> Anthony
>
> On Monday, June 26, 2017 at 12:10:35 AM UTC-4, Ben Lawrence wrote:
>>
>> This thread might be a little old but here is a way where you do not have
>> to change web2py's delimiters, instead change Vue's delimiters. Problem is,
>> with V2, you got to put all the scripts up front or you will see the
>> strange delimiters as the page is loading. Here is main.html from that
>> scaffolding app using Vue V2
>> {{extend 'layout.html'}}
>> <div id="vue">
>> <div class="container max900">
>> <div class="fill">
>> <div class="padded">
>> <input v-model="keywords" placeholder="type some common words
>> like 'good' or 'one'"/>
>> </div>
>> </div>
>> ${ answer }
>> <div class="fill">
>> <div class="padded" v-for="doc in docs">
>> <div class="lifted padded">
>> <h5>${doc.title}</h5>
>> <p>${doc.body}</p>
>> </div>
>> </div>
>> </div>
>> </div>
>> </div>
>>
>> {{block bottomjs}}
>> <script>{{=ASSIGNJS(BASE='/'+request.application+'/')}}</script>
>> <script src="https://unpkg.com/vue";></script>
>> <script src="https://unpkg.com/[email protected]/lodash.min.js";></script>
>> <script>
>>
>> docsGET = function(url, data) {
>> return jQuery.getJSON(url, data).fail(self.on_error);
>> };
>>
>> var mainVM = new Vue({
>> el: '#vue',
>> delimiters: ['${', '}'],
>> data: {
>> answer: 'Results',
>> page: '', /* page name */
>> state: {}, /* global page state */
>> keywords: '', /* example: search field */
>> docs: [] /* example search response */
>> },
>> watch: {
>> // whenever keywords change, this function will run
>> keywords: function (newKeywords) {
>> this.answer = 'Waiting ...'
>> this.getAnswer()
>> }
>> },
>> methods: {
>> // _.debounce is a function provided by lodash to limit how
>> // often a particularly expensive operation can be run.
>> // In this case, we want to limit how often we access
>> // the search, waiting until the user has completely
>> // finished typing before making the ajax request. To learn
>> // more about the _.debounce function (and its cousin
>> // _.throttle), visit: https://lodash.com/docs#debounce
>> getAnswer: _.debounce(
>> function () {
>> if (this.keywords.length < 3) {
>> this.answer = 'Type more characters...'
>> return
>> }
>> this.answer = 'Thinking...'
>> var vm = this
>> docsGET(BASE+'default/search',{q:
>> vm.keywords}).done(function(docs){vm.docs=docs; vm.answer = "Results:"});
>> },
>> // This is the number of milliseconds we wait for the
>> // user to stop typing.
>> 500
>> )
>> }
>> })
>> </script>
>> {{end}}
>>
>>
>> On Sunday, February 26, 2017 at 1:54:24 AM UTC-8, St. Pirsch wrote:
>>>
>>> Hi John,
>>> Thanks! it works! Strange though that the untouched scaffolding app
>>> seems to work for some people and for others not.
>>> Best,
>>> Stephan
>>>
>>> Am Dienstag, 31. Januar 2017 17:50:14 UTC+1 schrieb John Philip:
>>>>
>>>> Hi Stephan,
>>>>
>>>> I tried the brutal approach. I changed the delimiters for web2py on the
>>>> model and changed all of the views accordingly. I left the delimiters for
>>>> vuejs as default ('{{' '}}')
>>>>
>>>> regards,
>>>>
>>>> John
>>>>
>>>> On Monday, January 30, 2017 at 10:24:25 AM UTC+1, St. Pirsch wrote:
>>>>>
>>>>> Hello John,
>>>>> Would you mind sharing your solution?
>>>>> Thx,
>>>>> Stephan
>>>>
>>>>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
