22SubmitDataToAPI.txt

43.Submit Form Data to API:
    - make a form
    - insatll axios (npm i vue-axios axios)
    - get from data
    - submit data to API
    - Test API result

    - https://github.com/typicode/json-server
    - https://www.npmjs.com/package/vue-axios

    
- PostComponent.vue file:
        <template>
        <div>
            <form @submit="submitData" method="post">                       -> post is a method
                <input type="text" placeholder="Enter title" name="title" v-model="post.title" /><br><br>
                <input type="text" placeholder="Enter author name" name="author" v-model="post.author" /><br><br>
                <button type="submit">Post</button>
            </form>
        </div>
        </template>

        <script>

        import Vue from 'vue';
        import axios from 'axios';
        import VueAxios from 'vue-axios';
        Vue.use(VueAxios, axios);

        export default {
        name: 'PostComponent',
        data() {
            return {
                post:{
                    title:null,
                    author:null
                }
            }
        },
        methods: {
            submitData(e)
            {
                this.axios.post('http://localhost:3000/posts',this.post).then((result)=>{       
                    console.warn("result",result);
                })
                e.preventDefault();
            }
        }
        }
        </script>

    - http://localhost:3000/posts ki fake API create kari hai.
    - 20JsonServer.text me dekhe video ki link hai -> How to make fake api using Json Server

- App.vue file:
        <template>
            <div id="app">
                <h1>Submit Form Data to API</h1>
                <PostComponent />
            </div>
        </template>

        <script>
            import PostComponent from "./components/PostComponent.vue";
            export default {
                name: "App",
                components: {
                    PostComponent
                }
            };
        </script>

- Create an Dummy API after that, run the page on browser and fill the details like author and title.
- After that, click post button and see the result on console page me Network hai usme.
- Uske Niche post ki api create ho jayengi and Preview me new author and title show karega.