useForm and partials

[philyboysmith]

Hoping someone can help. I would like to use the useForm helper, and share a form between a Create and Edit page but I'm struggling with how to achieve this. Lots of fields on the form, but just showing one fro brevity. Also, the following does actually work, but it's mutating props so I appreciate it's not the way to do it.

Create.vue

<script setup>

import { useForm } from '@inertiajs/vue3'
import ContactsForm from "./_Form.vue"

const form = useForm({
    name: '',
});

const addContact = () => {
    form.post(route('contacts.store'), {
        errorBag: 'addContact',
        preserveScroll: true,
    });
};

</script>

<template>
    <form @submit.prevent="addContact">
      <ContactsForm :form="form"/>
      <button>Submit</button>
    </form>
</template>

_Form.vue

<script setup>

defineProps({
    form: Object
});

import InputLabel from '@/Components/InputLabel.vue';
import TextInput from '@/Components/TextInput.vue';
import InputError from '@/Components/InputError.vue';

</script>
<template>
    <div class="col-span-6 sm:col-span-4 mt-4">
      <InputLabel
        for="name"
        value="Name"
      />

      <TextInput
        id="name"
        v-model="form.name"
        type="text"
        class="mt-1 block w-full"
      />

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

</template>

[jefhar]

I don't know if this is really Inertia related, but more Vuejs related. You should be able to pass the form object down to the component using model binding.

Create.vue

<template>
  <form @submit.prevent='addContact'>
    <ContactForm v-model:contact="form.contact" />
  </form>
</template>

<script>
import { useForm} from '@inertiajs/vue3';
import ContactForm from '~/_Form.vue';

const form = useForm({
  contact: {
    name: '',
    email: '',
  },
  someOtherData: {
    product_id: null
  },
});

const addContact = () => {
  form.post(route('contacts.store'), {
    errorBag: 'addContact',
    preserveScroll: true,
  });
};
</script>

ContactForm.vue

<template>
  <div>
    <InputLabel
      for="name"
      value="Name"
    />
    <TextInput
      id="name"
      type="text"
      v-model="contact.name"
    ></TextInput>
  </div>
</template>

<script>
import InputLabel from 'js/Components/InputLabel.vue';
import TextInput from 'js/Components/TextInput.vue';

// Experimental from VueJs 3.3, see https://blog.vuejs.org/posts/vue-3-3#definemodel
const contact = defineModel('contact');
</script>

[philyboysmith]

Ah this worked a treat, thanks so much @jefhar