작성 및 읽기 작업에 동일한 양식을 사용

작성 및 읽기 작업에 동일한 양식을 사용

나는 주인과 아이 구성요소를 가지고 있다.자식 구성 요소는 생성 모드 및 편집 모드의 데이터를 유지한다.하위 섹션에는 구성 요소가 생성 모드에 있을 때 사용되는 다음과 같은 데이터 섹션이 있음

 data() {
            return {
                title: '',
                description: '',
                organizer: '',
                startdate: '',
                enddate: '',
                email: '',
                phone: ''
            }
        },

생성 모드에서 입력하는 내용은 다음과 같다.

<input type="text" placeholder="enter event title here" class="form-control"  v-model="title">

편집 모드에서는 다음과 같이 클라이언트의 프로펠러 값을 업데이트하고 있다.

props:['currentevent']

커렌테스트의 값은 마스터 컴포넌트에서 하위 컴포넌트로 전달되고 있으며, 현재 편집되고 있는 값이기도 하다.

입력값을 처리하는 전체 코드는 다음과 같다.

<input type="text" placeholder="enter event title here" class="form-control" v-if="currentevent" :value="currentevent.title">

<input type="text" placeholder="enter event title here" class="form-control" v-else v-model="title">

그리고 (하위 컴포넌트의) 저장 방법에서 커렌벤트가 비어 있는지 여부를 확인하고 있다.비어 있으면 추가 코드를 트리거하고, 그렇지 않으면 업데이트 코드를 트리거한다.

질문: 이것은 효과가 있다, 하지만 나는 큰 형태를 가지고 있다. 그리고 각각의 모든 요소들을 위해 이것을 해야 하는 것은 깨끗한 디자인이 아니다. 당신은 나에게 내가 무엇을 해야 하는지 알려 줄 수 있는가?

나는 너의 곤경에 전적으로 감사한다.양식 데이터를 처리하는 가장 좋은 방법은 독립적으로 생성/업데이트하는 것이다.내가 권하고 싶은 것은 다음과 같다.

모든 데이터 필드를 상이한 속성으로 유지하지 않고 단일 개체에 포함하십시오. 이 경우, 이 필드를 호출하십시오.eventObj명확히 하기 위해:

data () {
    return {
        eventObj: {}
    }
}

그런 다음 마크업에서 개체를 통해 다음을 참조하십시오.

<input type="text" placeholder="..." class="form-control" v-model="eventObj.title">

그런 다음 편집하는 경우 상위 구성 요소에서 데이터를 개체로 전달하기 위한 받침대를 정의하십시오.

props: {
    currentevent: Object
}

그리고 들어오는 소품들을 아동 구성 요소의 데이터에 매핑하기만 하면 된다.

created() {
    Object.assign(this.eventObj, this.currentevent || {})
}

이제 당신의 입력이 좋아질 때론<input v-model="eventObj.title">저장된 제목(과 함께 전달된)이 있는 경우 처리됨currentevent) 필드는 그것으로 미리 채워질 것이며, 그렇지 않으면 공백이 될 것이다.

나는 이것이 당신이 알아내려고 하는 복잡성을 해결하는 올바른 방향으로 도움이 될 것이라고 생각한다.일반적으로 이런 일들과 관련된 다른 물류상의 문제들이 있지만, 나는 계속하지 않을 것이다. :)

내가 보는 문제는 양식에서 v-if/else를 제거하려는 것이다.여기서 아동의 로컬 데이터를 전달된 소품과 동기화하여 양식에서 로컬 변수만 사용하는 것을 권장한다.

이를 위한 한 가지 방법은 소품에 대한 감시자를 배치하고 소품이 바뀔 때마다 현지 변수를 업데이트하고 그 변수만 형식에 사용할 수 있다.

watch: {
   currentevent: function(newVal){
      title =  newVal.title,\
      description = newVal.description
      ...
   }
}

참조URL: https://stackoverflow.com/questions/41214191/use-the-same-form-for-create-and-read-operation