vue js two form model example site stackoverflow.com

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label for="firstName">First Name:</label>
      <input type="text" id="firstName" v-model="formModel.firstName" />

      <label for="lastName">Last Name:</label>
      <input type="text" id="lastName" v-model="formModel.lastName" />

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

    <form @submit.prevent="submitSecondForm">
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="formModel.email" />

      <label for="password">Password:</label>
      <input type="password" id="password" v-model="formModel.password" />

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

    <div>
      <h2>First Form Data:</h2>
      <p>First Name: {{ formModel.firstName }}</p>
      <p>Last Name: {{ formModel.lastName }}</p>
    </div>

    <div>
      <h2>Second Form Data:</h2>
      <p>Email: {{ formModel.email }}</p>
      <p>Password: {{ formModel.password }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formModel: {
        firstName: '',
        lastName: '',
        email: '',
        password: '',
      },
    };
  },
  methods: {
    submitForm() {
      // Handle submission logic for the first form
      console.log('First Form Submitted');
    },
    submitSecondForm() {
      // Handle submission logic for the second form
      console.log('Second Form Submitted');
    },
  },
};
</script>

<style scoped>
/ Add your component-specific styles here /
</style>