How to assign input value parameter in "useForm" variables. Inertiajs/Laravel

I'm having a problem assigning the input "value" parameter to the useForm variable in Inertiajs. Here is the scenario 1- I have a form with 6 fields, all of which are of text type. 2- There is a hidden input field which holds the user ID. (The user ID is coming from a parent component using props along with other data) 3- I will pass this data to controller for further processing.

Problem As I'm using Inertiajs so form values are reactive but problem is how can pass that hidden field in it?

Form Code

            <input type="text"
             name="hobbie"
             placeholder="Enter hobbies"
             v-model="form.hobbie"
             required
            > 
             <br> <br>

            <input type="text"
             name="physical_health"
             placeholder="Enter Physical Health"
             v-model="form.physical_health"
             required
             >
             <br> <br>


            <input 
             type="text"
             name="education"
             placeholder="Enter Education"
             v-model="form.education"
             required
             >
            <br> <br>

            <input
             type="text"
             name="mental_health"
             placeholder="Enter Mental Health"
             v-model="form.mental_health"
             required
             >
             <br><br>

            <input
            type="text"
            name="behaviour"
            placeholder="Enter Behaviours"
            v-model="form.behaviour"
            required
            >
            <br><br>

            <input
             type="text"
             name="self_care"
             placeholder="Enter Self Care" 
             v-model="form.self_care"
             required
             >
             <br><br>
            <input
            type="text"
            name="life_skill"
            placeholder="Enter Life Skills"
            v-model="form.life_skill"
            required
            >
            <br><br>
            <input type="submit" value="Add Station" class="submit"> <br><br>
        </form>

Vue Script Code

<script setup>

import { useForm } from '@inertiajs/inertia-vue3';

const props = defineProps({ sData: String });

PS** I have tried to assign value like this "child_id: sData[0].ChildID" but it's not working as well.

tykus

3 years ago

Level 104

Set the existing/current value in the form like this:

useForm({
  field: 'value', 
  another_field: 123, 
});

nutkani1337

3 years ago

Level 1

@tykus Thing is the child id is dynamic which means if the user click on child1 profile the id of child1 will be assigned.

tykus

3 years ago

Level 104

@nutkani1337 so handle the click event and update the value on the form property

nutkani1337

3 years ago

Level 1

i want to store that in hidden form field which means it would not be reactive but still i want to get its value in the function along with other reactive values

tykus

3 years ago

Level 104

@nutkani1337 in what function?

Aside, since you've editing the OP; you can access the prop data using:

const props = defineProps({ sData: String });
useForm({
  child_id: props.sData[0].ChildID,
  // ...
})

2 likes

nutkani1337

3 years ago

Level 1

@tykus It works @tykus you are a life saver buddy <3

tykus

3 years ago

Level 104

@nutkani1337 no worries, mark the thread closed if you’re all set

Please or to participate in this conversation.