How to use same User form component in VueJS 2 for both create and edit User?

Question

Currently I have separate components CreateUser.vue and EditUser.vue with very big form.

Route for CreateUser is /users
Route for EditUser is /users/:username.

The backend API is also different:

POST for create (example.com/users) and
PUT for edit (example.com//users/:username).

Also in EditUser, username field is readonly as it cannot be edited once created otherwise both CreateUser and EditUser templates are same but Javascript part is different.

Question:

How can I combine this into one Component UserForm.vue and eliminate CreateUser.vue and EditUser.vue ?

In the main UI there is a button Create User which routes to CreateUser component. In the list of users view, each row has a button Edit which routes to EditUser component.

I am using Vue router for defining routes similar to below:

{
   path: '/users',
   name: 'createUser',
   component: CreateUser
},
{
   path: '/users/:id',
   component: EditUser,
   name: 'editUser'
}

IvanMalenko · Accepted Answer · 2018-08-19 13:52:58Z

5

You can pass parameters into your component via props property in router configuration and then use it as in answer above to render the necessary inputs...

{
  path: '/users',
  name: 'createUser',
  component: UserForm
  props: {editMode: false}
},
{
  path: '/users/:id',
  name: 'editUser'
  component: UserForm,
  props: {editMode: true}
}

answered Aug 19, 2018 at 13:52

IvanMalenko

4272 silver badges13 bronze badges

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

1 Comment

realnot Over a year ago

The how do you use '/users to load a list of users if it's mapped on createUser?

Erubiel · Accepted Answer · 2018-08-23 16:15:13Z

1

Just add a property on your UserForm.vue

props: {
    currentAction : {
        type : String,
        default: 'create',
        required: true
    },
},

you'll have to pass this string at

<user-form :currentAction="create"></user-form>

And in your component use it to call the necessary method createUser() or updateUser(). Also use it to render the necessary inputs and or calculate the necessary computed properties.

By what i see, this property will have to be a data property on your Main UI you'll have to change this property before you show the user-form.

edited Aug 23, 2018 at 16:15

user10241436

answered Aug 19, 2018 at 13:28

Erubiel

2,97216 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to use same User form component in VueJS 2 for both create and edit User?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related