vue-post

    0.2.1 • Public • Published

    vue-post

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

    INFO: Maintainability GitHub license NPM Codacy Badge codebeat badge

    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

    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: "olo@olo.com",
        }
    })

    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='olo@olo.com'/>
    </form>
    

    For any help reach me 🕊twitter / 📧mail

    Thank you!

    Keywords

    none

    Install

    npm i vue-post

    DownloadsWeekly Downloads

    17

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    6.97 kB

    Total Files

    6

    Last publish

    Collaborators

    • soulsam480