Vue.js

Emitting and receiving events within slots

10

26

Solved

Yeah, pretty much. The logic is in PersonalInformation component. This is the form. I need to fire it when clicking the button in the footer slot. I can't get any event emitting to work though. It may seem silly but some other components follow this way for good reason. Like the Addresses component. It contains logic for Google Places API, adding, updating, as well as the markup. I would never want a button for saving as it isn't relevant on say the checkout page, but it is for account addresses. Having one component makes more sense to me.

Gotcha. Not disputing the way you've done it, and that makes sense now. Working on a solution for you now!

I'm open to a better approach! This one just made more sense to me. Though it does seem silly for PersonalInformation right now, but later down the line, that component could also be used elsewhere. I'm all ears!

Hey,

Thanks for that. Very close, but not quite. I am getting a new error now (see below).

Notable changes:

• The form ref is now personalInformationForm
• The submit method is now updatePersonalInformation

    const updatePersonalInformation = () => {
        Inertia.patch...etc...

defineExpose({
    updatePersonalInformation,
});

const personalInformationForm = ref(null);

<PersonalInformation ref="personalInformationForm" />

The form:

<form class="grid grid-cols-6 gap-6" method="POST" v-on:submit.prevent="updatePersonalInformation">
    Input fields... No submit button.
</form>

The submit button (footer slot):

<button class="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-black rounded-md border border-transparent shadow-sm hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" type="submit" v-on:click="personalInformationForm.submit()">Save</button>

I have tested using the original names you supplied as well, it made no difference. The error:

TypeError: $setup.personalInformationForm.submit is not a function

The problem here is that you're using an on-submit handler on the form when this isn't necessary.

Instead of calling personalInformationForm.submit() you need personalInformationForm. updatePersonalInformation() (the method you're exposing) and to remove the event handler from your form.

An alternative approach would be to do this (I've not tested this code locally):

<template>
  <AccountPanel>
    <PersonalInformation />

    <template v-slot:footer>
      <button type="submit" form="personal-information-form">Click me</button>
    </template>
  </AccountPanel>
</template>

And in PersonalInformation:

<template>
    <form action="" id="personal-information-form" v-on:submit.prevent="submit"></form>
</template>

<script setup>
    const submit = () => {
        console.log('submit the form')
    }
</script>

This works because using the form attribute on a button will submit the form with the same ID, even if it's not within the form itself.

<button form="personal-information-form">Click me</button>

Thanks @alex! Everything is working now. Here is the final dumbed down result in case anyone else stumbles upon this thread.

const personalInformationForm = ref(null);

 <AccountPanel
    panelDescription="Update your personal information."
    panelId="personalInformation"
    panelTitle="Personal Information"
>
    <PersonalInformation ref="personalInformationForm" />

    <template v-slot:footer>
        <button v-on:click="personalInformationForm.updatePersonalInformation()">Save</button>
    </template>
</AccountPanel>

<script setup>
    import { reactive } from "vue";

    const updatePersonalInformation = () => {
        // logic...
    };

    defineExpose({
        updatePersonalInformation,
    });
</script>

<template>
    <form method="POST" v-on:submit.prevent="updatePersonalInformation">
        <div>
            <label for="first_name">First name</label>

            <input v-model="form.first_name">
        </div>

        <div>
            <label for="last_name">Last name</label>

            <input v-model="form.last_name">
        </div>

        <div>
            <label for="email">Email address</label>

            <input v-model="form.email">
        </div>

        <div>
            <label for="phone">Phone</label>

            <input v-model="form.phone">
        </div>
    </form>
</template>