[Vuejs]-Good practice for re-usable form component in Vue

by

1👍

I don’t know exactly your context, but this is how I use to do:

First, you don’t need both components Parent and Child. You can do all you want inside Form Component.

To deal with the differences between create and edit modes, an option is computed property based on current route (if they are different according to create/edit operations).

Using this property, you decide if data will be fetched from API, if delete button will has shown, the title of the page and so on.

Here is an example:

async created() {
  if (this.isEditMode) {
    // fetch form data from API according to User ID and copy to a local form
  },
},
computed: {
  formTitle() {
    return (this.isEditMode ? 'Update' : 'Create') + ' User';
  },
}
👤Matheus Valenza

Leave a comment