Best Practice for Handling Duplicate Inputs in Vue CRUD Forms

Hello everyone,

I am wondering if there are any best practices when creating CRUD components (in particular the Create and Edit form components) that reduce the duplication of inputs. In CRUD apps, the Create and Edit forms tend to include common inputs. I come from a Laravel background, and in Laravel we move the common form inputs, into a partial, and then include that partial in the Create and Edit forms. Then, if we need to change any of the inputs, we only need to do it in a single file. In Vue there isn’t really a way to include a chunk of html like partials in Laravel. I could create a form component that wraps the common inputs and gets used in the Create and Edit forms, but then I must handle passing props down and emitting events back up to the parent form, which seems like it makes things overly complicated. I noticed that a lot of the tutorials just seem to duplicate the inputs in both the Create and Edit.

I was hoping someone might know of a better way to share the common inputs between, so they can be reused in the Create and Edit components and eliminating duplication, without being overly complicated.

Yea, that would kind of be the most “correct” way to do it in Vue; extract common functionality into its own component.

By passing a reactive prop to the child, the child can directly modify it (i.e. you can use v-model in the child) and don’t need to worry about emitting events back up. This is really not recommended, but it’s what I would use for simplicity.

I don’t think this necessarily is a bad approach. In the future, you might want Create and Edit to look/function different, and then duplicating the code now makes a little bit sense, since it will be easier to change only one of them in the future. But if you know they should always be the same, then duplicating is bad.

In Vue there isn’t really a way to include a chunk of html like partials in Laravel

Of course you can do this. You can simply make a component ‘My Partial.vue’ which contains the common html and then use this component in other components.

About the create/edit forms: my approach is to only create 1 component for example ‘CreateOrEditPost.vue’ which optionally accepts a ‘postToEdit’ as prop. Then, inside the component you can simply check if postToEdit is NULL to determine whether you’re in the create or edit flow. This can be useful if there are some differences between the two flows. Since modifying the incoming prop directly is a bad practice, you also have a local data variable ‘post’, which you declare as an empty object by default. This is the main variable which will be used in the form’s v-model (example v-model="post.title") and will be the post you send to the server when submitting the form. In the created() method you clone (using object deconstruction or lodash for example) the incoming postToEdit prop in the post to make sure that post is the one you’re editing.

Hope this helps.