Vue 3 multiple v-model from child component return empty result

Question

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 class="px-2 py-3 text-right sm:px-6">
          <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

Answer 1

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>