Select list value is null in Laravel controller

I am writing input form using vuejs 3 as:

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import FDN from '@/Components/FDN.vue';
import { Head, Link, useForm,Inertia } from '@inertiajs/inertia-vue3';
import Checkbox from '@/Components/Checkbox.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';

import { createApp } from 'vue'


const app = createApp({})


const form = useForm({
    consignee: null,
    fdndate: '',
});

const submit = () => {

    form.post(route('fdnote_post'), {
        onSuccess: () => form.reset(),
    });

};

function resetForm(){
    form.clear;
}

defineProps({
    sheds: Array,
});

</script>

<template>
    <AppLayout title="Dashboard">
<template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Main File
            </h2>
        
        </template>
<form @submit.prevent="submit">
        <div class="py-12 bg">
            <div class=" mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                    <FDN :sheds1="sheds" :form="form" />
                    
                </div>
            </div>
        </div>

         <div class="flex items-center justify-center mt-4">
                
                <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                    Save
                </PrimaryButton>
        
                <PrimaryButton class="ml-4" @click="resetForm">
                    Clear
                </PrimaryButton>
            </div>
        </form>
    </AppLayout>
</template>

FDN.vue

<script setup>
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import Checkbox from '@/Components/Checkbox.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';


defineProps({
    sheds1: Array,
        form:useForm,
      
});

</script>

<template>

<div class="sm:px-6 lg:px-8 space-7-3.5 h-56 grid grid-cols-3 gap-4 content-start
">
     
            <div>
                <InputLabel for="consignee" value="Consignee" name="Consignee" />
                <Select
                    id="consignee"
                    v-model="form.consignee"
                    class="mt-1 block w-full"
                    required            
                >

            <Option selected="true" disabled="disabled">Please Select Consignee</Option>
            <Option v-for= "sheds in sheds1" :key="sheds.id" :value="sheds.id">{{sheds.name}}</Option>
            </Select>

            <InputError class="mt-2" :message="form.errors.name" />
            </div>

            <div>
                <InputLabel for="fdndate" value="Date" />
                <TextInput
                    id="fdndate"
                    v-model="form.fdndate"
                    type="date"
                    
                    class="mt-1 block w-full"
                    required
                />
                <InputError class="mt-2" :message="form.errors.fdndate" />
            </div>

           
    </div>
</template>

in Laravel controller the value of consignee is null

Sinnbeck

3 years ago

Level 102

Do you see it's value if you use console.log(form) in the submit function?

muazzamazaz

3 years ago

Level 2

@Sinnbeck its null in console.log(form)

MohamedTammam

3 years ago

Level 51

What if you try the following

defineProps(['sheds1', 'form']);

muazzamazaz

3 years ago

Level 2

@MohamedTammam same

MohamedTammam

3 years ago

Level 51

@muazzamazaz I don't know why it isn't working, but here's a workaround in the meantime.

In your parent component pass

<FDN :sheds1="sheds" v-model="form.consignee" />

In your FDN component make the input like

defineProps(['modelValue']);
defineEmits(['update:modelValue']);

<!-- .... -->

<Select
    id="consignee"
    @input="$emit('update:modelValue', $event.target.value)"
	:value="modelValue"
    class="mt-1 block w-full"
    required
>

muazzamazaz

3 years ago

Level 2

@MohamedTammam <FDN :sheds1="sheds" v-model="form.consignee" /> please note I have to pass form as props because there are other fields in component and all text, date input fields are working fine. when pass form as props like: