vue-post

A Vuejs plugin to send HTML form action POST requests from Javascript or from any HTML element!

INFO:

Table of Contents

• vue-post
  • Features
  • Compatibility
  • Installation
  • Usage
    • Steps
      • From Instance Method
      • From HTML Element
  • Notes

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: "[e-mail]",
    }
})

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='[e-mail]'/>
</form>

For any help reach me 🕊twitter / 📧mail

Thank you!