vue-post
v0.2.1
Published
send HTML Post requests from javascript
Downloads
18
Readme
vue-post
A Vuejs plugin to send HTML form action POST
requests from Javascript or from any HTML element!
Table of Contents
Features
- Send HTML form action
POST
request from vue instance method. - Send HTML form action
POST
request from any HTML element.
Compatibility
- Vuejs v2.0 and above
Installation
From npm
npm install vue-post --save
Usage
Steps
import it
import vuePost from "vue-post"
Use as a plugin
Vue.use(vuePost)
After this we have access to global instance method post
as this.post
inside .vue files and global vue component Post
inside .vue files.
From Instance Method
The instance method post
takes 3 parameters.
- action: the action URL of your form
- target: window of action (expected: _self, _blank)
- params: a json object of input values (See Notes)
/*any_component.vue*/
<template>
<!-- your HTML markup -->
<button @click="run">Post Form</button>
</template>
<script>
export default{
//other code
methods:{
run(){
this.post({
action: the action URL of your form ,
target: window of action (expected: _self, _blank),
params: a json object of input values
})
}
}
}
</script>
From HTML Element
We have access to global component Post
which is a HTML a
tag. It requires a single prop data
which is a json object.
/*any_component.vue*/
<template>
<!-- your HTML markup -->
<Post :data="data"/>
</template>
<script>
export default{
//other code
data(){
return{
data:{
action: the action URL of your form ,
target: window of action (expected: _self, _blank),
params: a json object of input values
}
}
}
</script>
Notes
The params
parameter is an json object which contains the values of the input fields which are to be built and submitted inside a HTML form.
For the below implementation
this.post({
action: "https://itatakimas.com",
target:"_self",
params:{
NAME: "Zoro",
EMAIL: "[email protected]",
}
})
vue-post will build and submit the form as
<form action='https://itatakimas.com' target='_self' >
<input type='hidden' name='NAME' value='Zoro'/>
<input type='hidden' name='EMAIL' value='[email protected]'/>
</form>
For any help reach me 🕊twitter / 📧mail
Thank you!