I created a unique input component and now I need to retrieve data from it in the parent component. Initially, I followed the guide and used the component as suggested:
Input.vue
<input
:value="value"
@input="$emit('input', $event.target.value)"
class="w-full border-[1px] bg-transparent p-4 lg:text-sm placeholder:text-[#97999B]"
:placeholder="placeholder"
:class="statusStyles"
/>
MyComponent.vue
<Input
placeholder="Phone number"
type="text"
v-model="phone"
/>
Initially everything worked fine, but then I divided this code into components and introduced another wrapper, resulting in the following structure:
Form.vue
<OrderFormInfo
v-if="step === 'info'"
:name="name"
:apart="apart"
:city="city"
:phone="phone"
:postal="postal"
:region="region"
:address="address"
@next-step="handleNext"
/>
OrderInfo.vue
<Input
placeholder="phone number"
type="text"
v-model="phone"
/>
<Input
placeholder="recipient name"
type="text"
v-model="name"
/>
Input.vue
<template>
<div class="w-full space-y-[10px]">
<input
:value="value"
@input="$emit('input', $event.target.value)"
class="w-full border-[1px] bg-transparent p-4 lg:text-sm placeholder:text-[#97999B]"
:placeholder="placeholder"
:class="statusStyles"
/>
<p v-if="errorStatus" class="text-red-500">{{ errors[0] }}</p>
</div>
</template>
<script>
export default {
props: {
errors: Array,
sucess: Boolean,
value: String,
errorStatus: Boolean,
placeholder: String,
},
computed: {
statusStyles() {
if (this.errorStatus) {
return "border-red-500 text-red-500";
}
if (!this.errorStatus && this.value.length > 3) {
return "bg-white border-black text-black";
}
return "text-black border-[#97999B]";
},
},
};
</script>
Now the challenge is how to fetch the data from OrderInfo.vue in Form.vue? I attempted passing data through props but encountered an error stating that it's not allowed in Vue. Can someone please guide me on using v-model with nested components?