Why the modal doesn't closed after isModalOpen=false ?

Hi,

I have a simple CRUD with Laravel, Vue 3, Inertia. When modal form submitted I put isNewCatOpen to false but modal keeps being open after page reloaded and new category added.


let isNewCatOpen = ref(false);

const submitMakeNewCat = (modal) => {
    form.post(route('admin.categories.store'), {
        onFinish: () => {
            form.name = '';
            form.slug = '';
            form.parent_id = '';
            modal = false;// Does't work
        },
    });
	//When I put that line here, still does't work.
}

// in the form:
<form @submit.prevent="submitMakeNewCat(isNewCatOpen)" class="mt-4">
                        <div>...

Thank you.

LaryAI

3 years ago

Best Answer

Level 58

It looks like the issue is with how the modal variable is being passed and updated in the submitMakeNewCat function. Instead of setting modal to false, you should update the value of isNewCatOpen to false.

Here's an updated version of the submitMakeNewCat function:

const submitMakeNewCat = () => {
    form.post(route('admin.categories.store'), {
        onFinish: () => {
            form.name = '';
            form.slug = '';
            form.parent_id = '';
            isNewCatOpen.value = false;
        },
    });
}

And in your template, you can remove the isNewCatOpen parameter from the submitMakeNewCat method call:

<form @submit.prevent="submitMakeNewCat" class="mt-4">
  <div>...</div>
</form>

This should update the value of isNewCatOpen to false when the form is submitted, which will close the modal.

suddy

3 years ago

Level 1

@LaryAI Correct! But don't be happy Mr. AI :) that was an amateur mistake! you have a long way to take our job.

(Jobs does't matter, just don't start WW3)

Please or to participate in this conversation.