push!(LOAD_PATH,"/workspace/VueJS.jl/src/")
using VueJS,HTTP
# open method has 2 args 2nd is optional: open('page',name)
@el(bt,"v-btn",content="Link",click="open('https://www.google.com')") # name defaults to _self (opens in same tab)
@el(bt,"v-btn",content="Link",click="open('https://www.google.com','_blank')"); # name _blank (opens in new tab)
# submit methods has 4 args function(url, content=null,method='POST', async=true) only url is mandatory
@el(bt,"v-btn",content="Link",click="submit('sub_page')"); # when no content is provided submits all page elements (value attr) including files and nested structs
@el(bt,"v-btn",content="Link",click="submit('sub_page',{a:tf1.value,b:tf2.value})"); # when content is provided submits the object with POST method
# if you need to submit everything with different method you can do it providing null to content
@el(bt,"v-btn",content="Link",click="submit('sub_page',null,'PUT')");
@el(el1,"v-text-field",value="default text")
## Server side ou should use Standard parse function
function sub_page(req::HTTP.Request)
data=VueJS.parse(req)
# data has body and headers in the correct format
return "OK"
end
# Submits returns a promise, you can deal with it in the standard promise way
@el(bt,"v-btn",content="Link",click="submit('sub_page').then(x=>el1.value=(x.responseText)).catch(x=>el1.value='error')");
## You can create custom methods associated with VueStructs or pages
@el(el1,"v-text-field",label="Nr1",type="number")
@el(el2,"v-text-field",label="Nr2",type="number")
@el(bt,"v-btn",content="Link",click="cfn(el1.value)");
page([el1,el2,bt],methods=Dict("cfn"=>"""function(arg){this.el2.value=arg*2}""")) ## the function code should use "this" keyword
## The above example can be achieved with only an inline expression in button click, like: click="el2.value=el1.value*2"
page([el1,el2,bt],methods=Dict("cfn"=>"""function(arg){window.alert(arg)}""")); ## if you invoke a top level function, like alert should be preceded by window object