Can I use Inertia useForm() method with emitting events in Vue3 or is it only for 'get', 'post'... requests?

[Ifriqiya]

I have this child component with a form, where the form inputs are emitted to the parent component. This is code for the child component:

<template>
    <div>
        <jet-validation-errors class="mb-4" />

        <form @submit.prevent="sendChatMessage">
            <div>
                <jet-label for="message" value="Message" />
                <jet-input id="message" type="text" placeholder="Type your message here..." class="mt-1 block w-full" v-model="form.newMessage" required autofocus @keyup.enter="sendChatMessage" />
            </div>

            <div class="flex items-center justify-end mt-4">
                <jet-button :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                    Send Message
                </jet-button>
            </div>
        </form>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useForm, usePage } from '@inertiajs/inertia-vue3'
import JetButton from '@/Jetstream/Button.vue'
import JetInput from '@/Jetstream/Input.vue'
import JetLabel from '@/Jetstream/Label.vue'
import JetValidationErrors from '@/Jetstream/ValidationErrors.vue'

const emit = defineEmits(['messageSent'])

const user = computed(() => usePage().props.value.user)

const form = useForm({
    newMessage: '',
})

function sendChatMessage() {
    emit('messageSent', {
        user: `${user.value.first_name} ${user.value.last_name}`,
        message: form.newMessage.value,
    })
}
</script>

As it is, the 'messageSent' event only sends the 'user' payload and not the 'message' payload. But when I hardcode a message string, the event emits both items.

Before now, I have only used the Inertia form helper methods to make a GET, POST or PATCH request to the backend and I'm wondering if it just doesn't work with events or I'm missing something. Thanks.

[WalrusSoup]

Was your intention to submit the data in the parent? If so, you can emit the whole form upward into the parent. This approach should work:

const form = useForm({});
// ...
emit('messageSent', form)

Then with the event for @message-sent bound to a function submit

const submit = (form) => {
    form.transform((data) => ({
        ...data,
        user: `${user.value.first_name} ${user.value.last_name}`,
    })).post('/my/endpoint', {
        onSuccess: () => {
            // do something here if needed
        }
    })
}

[Ifriqiya]

Hi @WalrusSoup, thanks for your suggestion. What I did was make the form input reactive using 'ref' and discarded using Inertia useForm() for that. But I reckon that your suggestion would work if I still want to use useForm() for reactivity in this instance.