havent used vue since dec 2015 but it was working like a charm with
web2py...
here is my code , use it just to get some ideas...
Create a js file and place it inside static folder...
main.js
(function ($, Vue) {
String.prototype.replaceAll = function(str1, str2, ignore)
{
return this.replace(new
RegExp(str1.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g,"\\$&"),(ignore?"gi":"g")),(typeof(str2)=="string")?str2.replace(/\$/g,"$$$$"):str2);
}
$(document).ready(function () {
Vue.config.delimiters = ['(%', '%)'];
var resource = Vue.resource('/Vue/default/formula/:id');
new Vue({
el: '#demo',
data: {
observ:'',
processing:false,
formexist:[],
menuSelected:'nova',
id:0,
dataf:'',
dev:'',
pedido:'',
receita:{},
formula:'',
searchClient:'',
aplicacao:'',
cliente:'',
subconta:'',
aplicacoes:[
'Perfis Rígidos',
'Perfis Flexíveis',
'Mangueira',
'Estores',
'Garrafas',
'Perfis Porta-preços',
'Vedantes',
'Injecção plastificada',
'Fittings',
'Tubagem Saneamento',
'Tubagem Pressão'
],
cores:[
'AMARELO',
'AZUL',
'BEGE',
'BORDEAUX',
'BRANCO',
'CARAMELO',
'CARVALHO',
'CASTANHO',
'CINZENTO',
'CREME',
'CRISTAL',
'FAIA',
'LARANJA',
'MOGNO',
'NATURAL ',
'NEGRO',
'OURO',
'PRETO',
'ROSA',
'SALMÃO',
'VERDE ',
'VERMELHO ',
'VIOLETA',
],
clientes:[],
totalphr:0,
cuTn:0,
menuItems:[
{nome:'Resinas',cod:405},
{nome:'Lubrificantes',cod:430},
{nome:'Antichoque',cod:410},
{nome:'Estabilizantes',cod:415},
{nome:'Plastificantes',cod:425},
{nome:'Auxiliares',cod:420},
{nome:'Pigmentos',cod:440},
{nome:'Cargas',cod:455},
{nome:'Todos',cod:4},
{nome:'Seleccionados',cod:'selected'}
],
picked:'none',
list: []
},
computed: {
selected() {
return this.list.filter(list => list.checked=='selected');
},
},
filters:{
first:function(value,stop){
return value.slice(0,stop);
},
numbergroup: {
read: function (text) {
text = text.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1 ");
var t = text ;
return t;
}
},
percgroup:{
read:function(text){
return (text*100).toFixed(6);
}
}
},
methods:
{
selectFormula:function(form){
this.reset();
temp= JSON.stringify(form);
this.id=form.id;
this.dev=form.dev;
this.cliente=form.cliente;
this.formula=form.formula;
this.aplicacao=form.aplicacao;
this.status=form.status;
this.pedido=form.pedido;
this.observ=form.observ;
this.dataf=form.dataf;
this.processing=true;
this.getmp(form['recipe']);
},
getmp:function(mps){
that=this;
var promises = [];
mps.forEach(function(mp) {
console.log("-->",JSON.stringify(mp));
var deferred = Q.defer();
$.ajax({
url : "/Vue/default/getmp.json",
type: "POST",
dataType:"json",
data : { 'id' : mp['cod']
,'descr':mp['descricao'],'phr':mp['phr']},
// headers: {'Content-Type': 'application/json'},
success: function(data, textStatus, jqXHR)
{
for ( x in that.list){
if (that.list[x].cod==mp['cod']){
that.list[x].checked='selected';
that.list[x].cume=data['cume'];
that.list[x].exist=data['exist'];
that.list[x].phr=data['phr'];
console.log('promise calling');
deferred.resolve(data);
}
}
},
error: function (jqXHR, textStatus, errorThrown)
{
error(function(error){
deferred.reject();
}
)}});
promises.push(deferred.promise);
});
that.menuSelected="nova";
that.picked="selected";
return Q.all(promises).then(function(data){
console.log("Q all done");
that.processing=false;
});
},
log: function(arg) {
console.log(arg);
},
doFab:function(id){
window.location='/Vue/default/doformind/'+id;
},
clickMenu:function(menu){
that=this;
this.menuSelected=menu;
if (menu=='existente'){
toastr.warning('Aguarde!');
that.formexist=[];
resource.get({id: 1}, function (item, status, request) {
item['form'].forEach(function(d){
console.log(d);
that.formexist.push(d);
});
});
toastr.info('OK!');
}
window.location='#close';
},
prepareForm:function(){
receita={};
receita=this.receita;
receita.id=this.id;
receita.status="draft";
receita.subconta=this.subconta;
receita.formula=this.formula;
receita.cliente=this.cliente;
receita.dataf=this.dataf;
receita.pedido=this.pedido;
receita.aplicacao=this.aplicacao;
receita.dev=this.dev;
receita.custotn=this.custotn;
receita.phr=this.phr;
receita.observ=this.observ;
receita.recipe=[];
mp=eval(JSON.stringify(this.list));
mp.forEach(function(m){
if (m.checked=='selected'){
receita.recipe.push(m);
}
});
},
// that=this;
// this.prepareForm();
// temp=JSON.stringify(this.receita);
// sdlksjdflk j
// formData={'form':temp};
// toastr.warning('Aguarde!');
// $.ajax({
// url : "Vue/default/echo",
// type: "POST",
// dataType:"json",
// data : formData,
// success: function(data, textStatus, jqXHR)
// {
// that.id=data;
// toastr.info('Fórmula gravada!'+" id:"+data);
// },
// error: function (jqXHR, textStatus, errorThrown)
// {
// toastr.warning(textStatus);
// }
// });
// }
// ,
setCliente:function(cli){
if (this.cliente==cli.nome){
this.cliente='';
this.subconta='';
}
else{
this.cliente=cli.nome;
this.subconta=cli.subconta;
}
},
setFormula:function(cor){
this.formula==cor? this.formula="":this.formula=cor;
},
setAplicacao:function(aplica){
this.aplicacao==aplica? this.aplicacao="":this.aplicacao=aplica;
},
gravar:function(){
console.log("gravar");
},
reset:function(){
this.list.forEach(function(item){
item.checked='';
item.phr=0;
});
},
toggle:function(item){
console.log("toggling");
item.checked!='selected' ? item.checked='selected'
:item.checked='';
if (item.checked=='') item.phr=0;
},
calcperc: function(n,o) {
that=this;
sum=0;
count=0;
that.list.forEach(function(item){
if (item.checked=='selected'){
sum+=item.phr*1;
count+=1;
}
});
that.list.forEach(function(item){
if (item.checked=='selected'){
console.log("item recalc");
item.perc=item.phr/sum;
item.cuTn=(item.perc*item.cume).toFixed(2);
}
});
var temp=0;
var temp1=0;
that.list.forEach(function(item){
if (item.checked=="selected"){
temp+=item.phr*1;
temp1+=(item.cuTn*1);
}
}
)
that.totalphr=temp.toFixed(3);
that.cuTn=temp1.toFixed(2);
}
},
ready:function(){
that=this;
toastr.options.progressBar = true;
toastr.options.timeOut = 1000;
this.$watch('list',this.calcperc,{deep: true});
toastr.warning('A carregar as matérias primas!')
Vue.http.get('http://localhost:8000/Vue/default/getStocks.json
',function(d){
d.forEach(function(row){
row.phr=0;
row.perc=0;
row.cuTn=0;
row.checked='';
that.list.push(row);
});
toastr.info('Matérias primas OK!');
}).error(function(data,status,request){
toastr.info('erroo');
});
toastr.warning('A carregar os clientes!');
Vue.http.get('http://localhost:8000/Vue/default/clients.json
',function(data){
that.clientes=data;
toastr.info('Clientes OK!');
});
}
});
});
})($, Vue);
Then in your view load this main.js
index.html
{{response.files.append(URL(r=request,c='static',f='/js/vue.js'))}}
{{response.files.append(URL(r=request,c='static',f='/js/vue-resource.min.js'))}}
{{response.files.append(URL(r=request,c='static',f='/js/main.js'))}}
{{response.files.append(URL(r=request,c='static',f='/js/toastr.js'))}}
{{response.files.append(URL(r=request,c='static',f='/js/q.js'))}}
{{response.files.append(URL(r=request,c='static',f='/css/toastr.css'))}}
{{response.files.append(URL(r=request,c='static',f='/css/index.css'))}}
{{extend 'layout.html'}}
<div id="demo">
{{include 'menu.html'}}
<div class="rightmenu">
<div>Custo/Ton</div>
<div><span class="label label-info" v-text="cuTn
|numbergroup"></span>€</div>
<div>Total phr:</div>
<div><span v-text="totalphr" class="label
label-info"></span></div>
<hr>
</div>
<div class="filtro">(%picked%) </div>
{{include 'table_mp.html'}}
<div v-show="picked=='selected'" class="btn btn-success btn-small"
v-on="click:saveForm()">Gravar</div>
<div v-show="picked=='selected'" class="btn btn-warning btn-small"
v-on="click:doFab(this.id)">Formula Industrial</div>
<a class="btn btn-info btn-small" href="#openDetalhes">Detalhes</a>
<a class="btn btn-info btn-small" href="#openMenu">Menu</a>
<div>(%selected|json%)</div>
<img src="/vue/static/images/spinner5.gif" class="spinner"
v-show="processing==true">
</div>
hope this helps...
2017-02-14 19:11 GMT+00:00 Dave S <[email protected]>:
>
>
> On Tuesday, February 14, 2017 at 2:55:30 AM UTC-8, John Philip wrote:
>>
>> Hi Ramon,
>>
>> since you've had experience using vuejs in web2py I thought I'd ask you.
>> I am using a vuejs component library to display a table from a json
>> dataset.
>>
>> var Main = {
>> data() {
>> return {
>> tableData: get_json_data_from_web2py_table
>> }
>> },
>> methods: {
>> formatter(row, column) {
>> return row.task;
>> },
>> filterTag(value, row) {
>> return row.status === value;
>> }
>> }
>> }
>> var Ctor = Vue.extend(Main)
>> new Ctor().$mount('#app')
>> // configure language
>> locale.use(en)
>>
>> my question is how can I pull the json data from the web2py database?
>> Also similarly I would like to be able to edit/delete a record and push the
>> changes to the web2py database. Do you have any suggestions?
>>
>> many thanks and regards,
>>
>> John
>>
>
> Perhaps use the as_dict() operator
> <URL:http://web2py.com/books/default/chapter/29/06/the-
> database-abstraction-layer#as_dict-and-as_list>
> and have a dot-json view rather than a dot-html view.
>
> Chapter 5 covers the views, but doesn't seem to spend much time on
> non-HTML fllavors. You can get most of the way, maybe all the way, by
> copying views/generic.json to your own file.
>
> /dps
>
>
>> On Sunday, June 28, 2015 at 10:57:58 AM UTC+2, Ramos wrote:
>>>
>>> I dont use ractive. Only Vuejs and a template inside a script tag is
>>> what i learned from the docs and video tutorials.
>>>
>>> Is the
>>>
>>> <script type="text/x-template" id="pote">
>>> <span class="label label-info">(%name%)</span>
>>> <div>
>>> <ul class="sortable-list">
>>> <li v-repeat="item:items|only name
>>> "><macro-doses pote='(%name%)' mp='(%item%)' myid=(%name%)
>>> items=(%items%)></macro-doses></li>
>>> </ul>
>>> </div>
>>> </script>
>>>
>>> accepted by web2py without any compilation so vue can do its job?
>>>
>>> Regards
>>>
>>> 2015-06-28 9:23 GMT+01:00 Massimo Di Pierro <[email protected]>:
>>>
>>>> I am not sure but I think you are mixing ractive and vue syntax.
>>>>
>>>> In ractive you have a <script/> and a <div id="target"/>. The script is
>>>> rendered in the target.
>>>>
>>>> In vue (which you use), the ractive code is in place but you still use
>>>> a script instead of a div.
>>>>
>>>> Massimo
>>>>
>>>>
>>>> On Saturday, 27 June 2015 12:34:31 UTC-5, Ramos wrote:
>>>>>
>>>>> No help :)
>>>>> Im doomed...
>>>>> Em 26/06/2015 17:29, "António Ramos" <[email protected]> escreveu:
>>>>>
>>>>>> Hello ,
>>>>>> so far so good i created my second vuejs page inside web2py and this
>>>>>> time using components.
>>>>>>
>>>>>>
>>>>>> my doformind.js has some components and changes the delimiters to
>>>>>> avoid colision with curlies.
>>>>>>
>>>>>> Vue.config.delimiters = ['(%', '%)'];
>>>>>> Vue.component('pote', {
>>>>>> props: ['name','items'],
>>>>>> template: '#pote' *<- refering to the html template inside my page*
>>>>>> });
>>>>>> etc....
>>>>>>
>>>>>>
>>>>>> my html ...
>>>>>>
>>>>>>
>>>>>> {{response.files.append(URL(r=request,c='static',f='/js/vue.
>>>>>> min.js'))}}
>>>>>> {{response.files.append(URL(r=request,c='static',f='/js/vue-
>>>>>> resource.min.js'))}}
>>>>>> {{response.files.append(URL(r=request,c='static',f='/js/toas
>>>>>> tr.js'))}}
>>>>>> {{response.files.append(URL(r=request,c='static',f='/js/jque
>>>>>> ry-ui.js'))}}
>>>>>>
>>>>>> *{{response.files.append(URL(r=request,c='static',f='/js/doformind.js'))}}*
>>>>>> {{response.files.append(URL(r=request,c='static',f='/css/toa
>>>>>> str.css'))}}
>>>>>>
>>>>>> *{{response.files.append(URL(r=request,c='static',f='/css/doformind.css'))}}*
>>>>>> {{extend 'layout.html'}}
>>>>>>
>>>>>>
>>>>>> <script type="text/x-template" id="pote">
>>>>>> <span class="label label-info">(%name%)</span>
>>>>>> <div>
>>>>>> <ul class="sortable-list">
>>>>>> <li v-repeat="item:items|only name
>>>>>> "><macro-doses pote='(%name%)' mp='(%item%)' myid=(%name%)
>>>>>> items=(%items%)></macro-doses></li>
>>>>>> </ul>
>>>>>> </div>
>>>>>> </script>
>>>>>>
>>>>>>
>>>>>> ....
>>>>>> ....
>>>>>> somewhere in my page i have this component
>>>>>>
>>>>>> <pote name="1" items="(%items%)"></pote>
>>>>>>
>>>>>>
>>>>>>
>>>>>> All of this works very well outside web2py.
>>>>>>
>>>>>> Inside web2py i get a blank page and in chrome dev tools i see that
>>>>>> <pote name="1" items="(%items%)"></pote>
>>>>>> was translated to
>>>>>> <pote name="1" items="[object Object],[object Object]"></pote>
>>>>>>
>>>>>> instead of
>>>>>>
>>>>>> <pote name="1">
>>>>>> <span class="label label-info">1</span>
>>>>>> <div>
>>>>>> <ul class="sortable-list ui-sortable">
>>>>>> </ul>
>>>>>> </div></pote>
>>>>>>
>>>>>> the items object have to elements each a json object.
>>>>>>
>>>>>> What could be the problem ?
>>>>>>
>>>>>> I suspect that the
>>>>>>
>>>>>> <script type="text/x-template" id="pote">
>>>>>> is not being correctly interpteted.
>>>>>>
>>>>>> Any comments would be very appreciated.
>>>>>>
>>>>>> Thank you
>>>>>>
>>>>>> António
>>>>>>
>>>>>> --
>>>> 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.
>>>>
>>>
>>> --
> 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.
>
--
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.
