I am currently working on a new project using Nuxt 3, and I have encountered an issue with a contact form where the input values from a child component are not being received by the parent element. Let's dive into the code breakdown:
Parent Component:
<script setup>
import { ref } from 'vue';
const formElement = ref(null);
const errorMessage = ref(null);
const form = ref({
name: null,
subject: null,
email: null,
message: null
});
const submitForm = () => {
if (!form.value.name || !form.value.subject || !form.value.message) {
console.log(form.value);
errorMessage.value = "please make sure your 'fullname', 'subject', and 'message' fields are filled";
} else if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.value.email)) {
errorMessage.value = "please fill in a valid 'email'";
} else if (form.value.message.length < 3) {
errorMessage.value = "please add some more context to the 'message'";
} else {
console.log("button clicked");
console.log(form.value);
formSubmit();
}
};
const formSubmit = () => {
const formElement = document.querySelector('form');
console.log(formElement);
// formElement.submit();
};
</script>
<template>
<form action="https://formsubmit.co/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e78e898188a7829f868a978b82c98488c9928c">[email protected]</a>" method="POST" ref="formm">
<UtilityMainInput name="Name" placeholder="Full Name" inputType="text" controlType="input" v-model="form.name"/>
<UtilityMainInput name="Subject" placeholder="Subject" inputType="text" controlType="input" v-model="form.subject"/>
<UtilityMainInput name="Email" placeholder="Email Address" inputType="email" controlType="input" v-model="form.email"/>
<UtilityMainInput name="Message" placeholder="Tell us anything" inputType="textarea" controlType="textarea" v-model="form.message"/>
<div class="empty-height"></div>
<UtilityButton type="btn" size="medium" :onClick="submitForm">Send Message</UtilityButton>
</form>
</template>
Child Component (UtilityMainInput):
<template>
<div class="normal-form">
<label :for="name" class="label">
{{name}}
</label>
<!-- text input -->
<input
v-if="controlType === 'input' && inputType ==='text'"
type="text"
maxlength="50"
:name="name"
:value="value"
@input="$emit('input', $event.target.value) ">
<!-- email input -->
<input
v-if="controlType === 'input' && inputType ==='email'"
type="email"
:name="name"
:value="value"
@input="$emit('input', $event.target.value) ">
<!-- textarea input -->
<div class="textarea" v-if="controlType === 'textarea'">
<textarea
:name="name"
:value="value"
@input="$emit('input', $event.target.value) ">
</textarea>
</div>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
required: true
},
placeholder: {
type: String,
required: false,
default: "text goes here"
},
inputType: {
type: String,
required: false,
default: "text"
},
controlType: {
type: String,
required: false,
default: 'input'
},
value: {
type: String,
default: ''
}
},
}
</script>
Whenever I attempt to submit the form after filling it out, all the values in the parent component's data properties show up as null. Even though I have used v-model to bind them, the parent is not updating with the child's input values. Can anyone help me identify the reason behind this issue?