Gửi HTTP POST Request với dữ liệu người dùng nhập trong VueJS 2

# Sử dụng npm
npm install axios

<template>
  <div>
    <h2>Post Data to API</h2>
    <form @submit.prevent="postData">
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="userData.name" required>

      <label for="email">Email:</label>
      <input type="email" id="email" v-model="userData.email" required>

      <button type="submit">Submit</button>
    </form>

    <div v-if="responseMessage">
      <h3>Response from API:</h3>
      <p>{{ responseMessage }}</p>
    </div>
  </div>
</template>
<style>
div {
  max-width: 400px;
  margin: 0 auto;
}

h2 {
  color: #333;
}

form {
  margin-top: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  box-sizing: border-box;
}

button {
  background-color: #007BFF;
  color: #fff;
  padding: 10px;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.response-container {
  margin-top: 20px;
}

h3 {
  color: #333;
}

p {
  margin: 10px 0;
  color: #007BFF;
}
</style>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userData: {
        name: '',
        email: '',
      },
      responseMessage: '',
    };
  },
  methods: {
    postData() {
      // Gửi HTTP POST request khi người dùng submit form
      axios.post('https://jsonplaceholder.typicode.com/posts', this.userData)
        .then(response => {
          // Hiển thị thông báo hoặc kết quả trả về từ API
          this.responseMessage = response.data.title;
        })
        .catch(error => {
          console.error('Error posting data:', error);
        });
    },
  },
};
</script>

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import DataPosting from './components/DataPosting.vue';

Vue.config.productionTip = false;

Vue.use(VueRouter);

const routes = [
  { path: '/', component: App },
  { path: '/data-posting', component: DataPosting },
];

const router = new VueRouter({
  routes,
  mode: 'history',
});

new Vue({
  render: h => h(App),
  router,
}).$mount('#app');

<template>
  <div id="app">
    <h1>Vue Router Example</h1>
    <router-link to="/">Home</router-link>
    <router-link to="/data-posting">Data Posting</router-link>

    <!-- Hiển thị component tương ứng với route -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  font-family: 'Arial', sans-serif;
  text-align: center;
  margin-top: 20px;
}

h1 {
  color: #333;
}

router-link {
  margin: 0 10px;
  text-decoration: none;
  color: #007BFF;
  font-weight: bold;
}

router-link:hover {
  text-decoration: underline;
}
</style>

npm run serve