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.
