vuejs post

<template>
  <div>
    <form @submit.prevent="postData">
      <label for="inputData">Data:</label>
      <input type="text" id="inputData" v-model="postDataValue" />
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      postDataValue: ""
    };
  },
  methods: {
    async postData() {
      try {
        const response = await this.$axios.post("/api/data", {
          data: this.postDataValue
        });
        console.log("Post successful:", response.data);
      } catch (error) {
        console.error("Error posting data:", error);
      }
    }
  }
};
</script>

Ensure you have Axios installed and configured in your project. This example assumes you're using the Vue Axios plugin. Adjust the API endpoint ("/api/data") and the data property name ("data") according to your backend requirements.