Inertia JS, useForm & child components

So i have a parent component"

const form = useForm({
   postcode: 'se99 ikl'
})
....
<Address :parent-form=form>

so whatever initial postcode value is, is transferred to the child component. and child component emits a value back if it changes.

Q. on the parent form, i am trying to have a reset button, which does form.reset(). the input fields defined on parent component RESET fine, the one in the address component DO NOT.

to test it out, i added to parent component:

let address = ref({
    postcode: form.postcode,
});

and pass that in, and i change the postcode in parent, it trickles down to child component.

martinbean

3 years ago

Level 80

@thirdeyevision I don’t really follow what’s going on here, but it sounds like your Address component should really be using v-models for the values of any inputs it contains, and then your “parent” component sets the model values on the Address component, and the Address component emits any changes back to the form in the parent component:

<template>
    <button type="reset" v-on:click="form.reset()">Reset</button>
    <Address
        v-model:postcode="form.postcode"
    />
</template>

<script>
export default {
    setup() {
        const form = useForm({
            postcode: 'SW1A 1AA',
        });

        export { form };
    },
};
</script>

That way, if you did reset the form, then the updated values would propagate to child components bound to those values.

Docs: https://vuejs.org/guide/components/v-model.html#multiple-v-model-bindings

thirdeyevision

3 years ago

Level 7

@martinbean

thanks as i said if i do a test for a data in parent ie

const test = ref({
  postcode: form.postcode
})

and pass that in to address it works, i think the inertia helper form is causing issues.. i really dont wanna be typing all the bits in if i can help it. but i'll try your solution anyway to see if it works..

thirdeyevision

3 years ago

Level 7

@martinbean ok i tried:

 <Address
                            v-model:test="form.test"
                            :parent-form="form"
                            @updateAddress="updateAddressFields"
                        />

created a new 'data' called test but i get an error

[plugin:vite:vue] v-model cannot be used on a prop, because local prop bindings are not writable.
Use a v-bind binding combined with a v-on listener that emits update:x event instead.

martinbean

3 years ago

Level 80

@thirdeyevision Follow the Vue docs I linked you to on how to create multiple input bindings in a component.

Unfortunately I can’t really help as you don’t show anything about the parent or child components, so I have no idea what props you’ve defined, how you’re trying to wire them up, access them, use them, etc.

However, the purpose of the multiple v-models was so you didn’t try passing the “parent form” to the Address component. The Address component should just have inputs whose values are provided by v-model bindings, and then emit changes back to the parent. It shouldn’t know anything about “parent forms“ or what component it’s used it. This is the entire point of using v-model bindings instead.

Please or to participate in this conversation.