Untitled

<template>
  <form @submit="handleSubmit" class="form-container">
    <div class="form-group">
      <label for="username">Username:</label>
      <input type="text" id="username" v-model="username" required class="form-control">
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="email" required class="form-control">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: ''
    };
  },
  methods: {
    handleSubmit(event) {
      event.preventDefault(); // Prevents the default form submission
      console.log('Submitted Username:', this.username);
      console.log('Submitted Email:', this.email);
      // You can add your form submission logic here, for example sending the data to a backend API
      // Example:
      /*
      axios.post('/api/form', {
        username: this.username,
        email: this.email
      })
      .then(response => {
        console.log(response.data);
        // Handle the response, e.g. show a success message to the user
      })
      .catch(error => {
        console.error(error);
        // Handle any errors, e.g. show an error message to the user
      });
      */
    }
  }
};
</script>

<style>
.form-container {
  width: 300px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-group {
  margin-bottom: 15px;
}

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

.input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>