VueJ 2에서 사용자 생성 및 편집에 동일한 사용자 양식 구성 요소를 사용하는 방법

VueJ 2에서 사용자 생성 및 편집에 동일한 사용자 양식 구성 요소를 사용하는 방법

현재 다른 컴포넌트가 있습니다.CreateUser.vue그리고.EditUser.vue아주 큰 폼으로.

• 경로:CreateUser이/users
• 경로:EditUser이/users/:username.

백엔드 API도 다릅니다.

• 작성용 POST (example.com/users)와
• 편집을 위해 PUT (example.com//users/:username).

에도EditUser,username필드는 한 번 생성되면 편집할 수 없으므로 읽기 전용입니다.그렇지 않으면 둘 다CreateUser그리고.EditUser템플릿은 같지만 Javascript 부분이 다릅니다.

질문:.

이 컴포넌트를 1개의 컴포넌트로 결합하려면 UserForm.vue제거하다CreateUser.vue그리고.EditUser.vue?

메인 UI에는 버튼이 있습니다.Create User어떤 경로로CreateUser요소.사용자 목록 보기에서 각 행에는 버튼이 있습니다.Edit어떤 경로로EditUser요소.

다음과 같은 루트를 정의하기 위해 Vue 라우터를 사용하고 있습니다.

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

매개 변수를 컴포넌트에 전달할 수 있습니다.props라우터 설정에서 속성을 지정한 후 위의 응답과 같이 사용합니다.to render the necessary inputs...

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

사용자 양식에 속성을 추가합니다.표시하다

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

이 끈을 다음에 건네주셔야 합니다

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

그리고 컴포넌트에서는 이 명령어를 사용하여 필요한 메서드 createUser() 또는 updateUser()를 호출합니다.또한 필요한 입력을 렌더링하거나 필요한 계산된 속성을 계산할 때도 사용합니다.

내가 보기에 이 속성은 기본 UI의 데이터 속성이어야 합니다. 사용자 양식을 표시하기 전에 이 속성을 변경해야 합니다.

언급URL : https://stackoverflow.com/questions/51918000/how-to-use-same-user-form-component-in-vuejs-2-for-both-create-and-edit-user