[Vuejs]-How to do HTTP post many form fields in vuejs?

by

-1👍

The best option is to use two-way data binding. Initialize a reactive value and bind that to the form elements using v-model directive in your inputs.

<script setup>
import { ref } from "vue";

const form = ref({});

// your submit function
</script>

<template>
  <form @submit.prevent="submitFunction()">
    <input type="text" v-model="form.name" placeholder="name" />
    <input type="email" v-model="form.email" placeholder="email" />
    <textarea v-model="form.message" placeholder="form.message"></textarea>
  </form>
</template>

Now your form data is accessible from the form object and you can use that in your submit function. To access a certain value you would need to call .value.property. e.g.

console.log(form.value)
console.log(form.value.name)
console.log(form.value.email)
console.log(form.value.message)

Similarly to edit a value you will:

form.value.name = "John Doe"

Leave a comment