I have multiple input from child component that I want to submit from parent component
Parent Component:
<EmployeesPersonalData
v-model:fn="fn"
v-model:ln="ln"
v-model:nik="nik"
/>
<div >
<button type="submit" @click="signUp">Save</button>
</div>
<script setup>
import { ref, onMounted } from 'vue'
import EmployeesPersonalData from
'./Forms/EmployeesPersonalData.vue';
const auth = getAuth
const fn = ref('')
const ln = ref('')
const nik = ref('')
const email = ref('')
const password = ref('')
function signUp() {
console.log(email.value)
}</script>
EmployeesPersonalData:
<template>
<div>
<label for="first-name">First name</label>
<input id="first-name" :value="fn" @input="$emit('create:fn', $event.target.value)" type="text" autocomplete="first-name" required placeholder="First Name">
</div>
<div>
<label for="last-name">Last name</label>
<input id="last-name" :value="ln" @input="$emit('create:ln', $event.target.value)" type="text" autocomplete="last-name" required placeholder="Last Name">
<p>*Required</p>
</div>
<div>
<label for="ssn_nik">SSN/NIK</label>
<input id="ssn_nik" :value="nik" @input="$emit('create:nik', $event.target.value)" type="number" autocomplete="nik" required placeholder="SSN/NIK">
</div>
</div>
<script setup>
import { ref } from 'vue'
const props = defineProps({
fn : String,
ln : String,
nik : String,
})
But when I tried to console.log(email.value)
or console.log(email)
it message/return nothing.
Whats wrong with code that I write? thanks in advance
CodePudding user response:
You should also define the emitted events which have this syntax update:property
like:
<script setup>
import { ref } from 'vue'
const props = defineProps({
fn : String,
ln : String,
nik : String,
})
const emit=defineEmits(['update:fn','update:ln','update:nik'])
and in template replace create
by update
:
<template>
<div>
<label for="first-name">First name</label>
<input id="first-name" :value="fn" @input="$emit('update:fn', $event.target.value)" type="text" autocomplete="first-name" required placeholder="First Name">
</div>
<div>
<label for="last-name">Last name</label>
<input id="last-name" :value="ln" @input="$emit('update:ln', $event.target.value)" type="text" autocomplete="last-name" required placeholder="Last Name">
<p>*Required</p>
</div>
<div>
<label for="ssn_nik">SSN/NIK</label>
<input id="ssn_nik" :value="nik" @input="$emit('update:nik', $event.target.value)" type="number" autocomplete="nik" required placeholder="SSN/NIK">
</div>
</div>