How to create reusable form and input components in Vue using slots?

Question

First, I am wondering whether I am on the right track with the patterns I am using for my application. Is it correct for me to create a reusable BaseForm component?

Another way to pose my question is: How do I model the parent component's data dynamically based on the child components I have included using slots?

I simply want to re use the same submit handler for all my forms. The submit handler should use the action and method props to determine how to configure axios, and the request body will be dynamic based on the BaseInput and BaseSelect components that are slotted within the BaseForm component.

Here's my sandbox example:

https://codesandbox.io/s/brave-chaplygin-9e5u2?file=/src/App.vue

I am stuck on the BaseForm.vue's handleSubmit method.

I could always just serialize the form data using vanilla JavaScript, but I feel that I should be doing it the Vue way. I am welcome to any opinions and advice. I am new to this framework, so I could be getting it totally wrong.

This course is really nice and helped me understand a lot of cool reusable patterns: michaelnthiessen.com/reusable-components Not a promo, just a guy making nice content. — kissu
– kissu, Commented Feb 19, 2021 at 14:20

Asimple · Accepted Answer · 2021-02-19 14:06:13Z

1

First of all you are passing event handlers to child components vie function props. But it's more common for React, not Vue.
In Vue you should just emit events and handle them in parent components. Read more about it here.
If you want to create reusable form component, one of the easiest ways is to do it with slots. You should create empty form with button (Cancel/Submit e.t.c) and add events for it.
Then you should just pass inputs to slot and that's all.
Working example:

https://codesandbox.io/s/charming-mclean-05jw7?file=/src/App.vue

answered Feb 19, 2021 at 14:06

Asimple

6503 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

devaent Over a year ago

I agree that the slots feature in Vue holds the key, but your example doesn't solve my issue which is that I don't want to rewrite the submit handler logic for each form. You have the submit handler logic in the App.vue file, when it should be completely contained in the BaseForm.vue file

Asimple Over a year ago

@devaent Which logic you don't want to copy, getting form data?

devaent · Accepted Answer · 2021-02-22 19:27:16Z

0

Thanks all for the replies. The answer as to how to do this is too complex to make it worth doing for my use case.

I still have reusable form input components, but having a reusable parent form component with a reusable form submit handler is not the way to go. Even though it would be nice to keep it DRY, I think the solution would be overengineered (if even possible).

Here’s my final result: https://codesandbox.io/s/romantic-almeida-wpxbw?file=/src/App.vue

answered Feb 22, 2021 at 19:27

devaent

4594 silver badges16 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 03:49:43Z

0

I would just put a template ref on <form>, and create a FormData with it, which will include all the form's named <input>s in its default slot:

<form ref="form">...</form>

const formData = new FormData(this.$refs.form)

demo

edited Jul 16, 2022 at 3:49

answered Feb 19, 2021 at 21:05

tony19

140k23 gold badges281 silver badges354 bronze badges

Collectives™ on Stack Overflow

How to create reusable form and input components in Vue using slots?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related