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/lodash@4.13.1/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 web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
