모달 닫힐 때까지 기다렸다가 OK 또는 CANCEL을 클릭하여 실행을 계속하려면 어떻게 해야 합니다.

모달 닫힐 때까지 기다렸다가 OK 또는 CANCEL을 클릭하여 실행을 계속하려면 어떻게 해야 합니다.

알고리즘:

1. 2개의 오브젝트 배열(새로운 것, 삭제한 것, 이름 변경 등)의 차이를 알 수 있습니다.차이는 다음 위치에 저장됩니다.data[1-5]
2. #1에 따라 모달의 텍스트 요약(텍스트의 오브젝트)을 작성하여 사용자에게 어떤 차이가 발견되었는지 알립니다.이 요약은 다음 위치에 저장됩니다.someDataToShowInModal.
3. 차이가 발견되면 요약을 포함한 모달(modal)을 사용자에게 보여줘야 합니다.변경 내용을 적용하려면 사용자가 수락(확인 클릭) 또는 거부(취소 클릭)해야 합니다.

4. 질문: 사용자가 모달의 [OK]또는 [CANCEL]버튼을 클릭할 때까지 기다리는 방법

   코드에는 두 가지 가능한 해결 방법이 나와 있지만 어떻게 구현해야 하는지 알 수 없습니다.

   1. 모달은 Promise로 랩합니다.

   2. 사용하다state.doSave어떻게 해서든 바뀔 때까지 기다리면서myModalComponent.

5. 사용자가 [확인]을 클릭하면 변경 내용을 적용합니다.

구현하려는 로직을 나타내는 의사 코드를 다음에 나타냅니다.

state.displaces.displaces

modalTextSummary = {}

action.displaces

async myAction ({ state }) {
  let modalClosed
  let someDataToShowInModal = {}

  let data1 = []
  let data2 = []
  let data3 = []
  let data4 = []
  let data5 = []

  // #1. Push difference to "data[1-5]"
  data1.push(xyz1)
  data2.push(xyz2)
  data3.push(xyz3)
  data4.push(xyz4)
  data5.push(xyz5)

  // #2. Based on data[1-5] prepare "someDataToShowInModal"
  someDataToShowInModal = {xyz}

  // #3. We change "state.modalTextSummary" and by this we open
  // a Modal (because "myModalCompont" has "watch: {modalTextSummary}")
  state.modalTextSummary = someDataToShowInModal

  // #4. HOW TO WAIT UNTIL USER CLICKS Modal's "OK" or "CANCEL"?

  // v1:
  // something like...
  modalClosed = await myModalComponent

  // v2:
  // I can add "state.doSave = ''" which can be
  // set by "myModalComponent" to either 'OK' or 'CANCEL', but how
  // in this case I can wait for state changes?
  modalClosed = await state.doSave !== ''

  // #5. Apply changes
  if (modalCloses === 'OK') {
    // ... code which handles data from data[1-5]
  }
}

myModalComponent.js

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'modalTextSummary'
    ])
  },

  watch: {
    modalTextSummary: function () {
      if (this.modalTextSummary !== {}) {
        // Here I show bootstrap-vue modal
      }
    }
  }
}
</script>

OK 버튼으로 모달 종료 후 함수를 호출하는 방법은 알고 있지만, 이 경우 호출된 함수 내에서 다시 선택하려면 vuex에 데이터 [1-5]를 임시로 저장해야 합니다.또한 보다 간단한 방법으로 호출하지 않도록 하겠습니다.

리팩터를 만들자고 제안하고 싶습니다.

1) 인터페이스(서버측 렌더링 문제 등)에 대해 스토어의 대응은 알 수 없습니다.- 나쁜 관행입니다.

2) 모달의 데이터는 모달의 부모 컴포넌트에 저장하는 것이 좋습니다.다음은 예를 제시하겠습니다.https://jsfiddle.net/yyx990803/70yyx8z2/

그런 다음 다음과 같은 작업을 수행할 수 있습니다(의사 코드).

<my-modal
    v-if="showModal"
    @cancel="processModalCancel"
    @submit="processModalSubmit"
    >
    <!-- mutating-manipulations with modalData -->
</my-modal>

---

openModal() {
    this.showModal = true;
    this.modalData = store.dispatch('prepareDataToShowInModal'); // myAction, first part
},
processModalCancel() {
    this.showModal = false;
    this.modalData = null;
},
processModalSubmit() {
    this.showModal = false;
    store.dispatch('saveModalData', this.modalData); // myAction, second part
    this.modalData = null;
},

bsModal을 사용하는 경우 두 버튼에 대해 별도의 함수 바인딩을 작성해야 합니다.사용자가 버튼을 클릭하거나 모달 외부를 클릭할 때까지 open.so은 나머지 함수를 닫거나 버튼을 클릭하는 이벤트를 확인합니다.

<button (click)="confirm()"></button>
<button (click)="Cancel()"></button>
import { BsModalRef} from 'ngx-bootstrap';
constructor(){public modalRef: BsModalRef}

confirm(){
//do anything 
this.modalRef.close();
}

Cancel(){
//do anything
this.modalRef.close();
}

이 게시물 덕분에 v2를 통해 구현하는 방법을 알게 되었습니다.

gleam의 대답이 더 짧고 명확하기 때문에 당신은 그의 해결책을 선호해야 합니다.아래는 교육 목적으로만 게재된 솔루션입니다.

state.displaces.displaces

modalTextSummary = {}
doSave = false

action.displaces

// My 'store' file is at the root. Where is yours - I do not know :)
import store from '@/store'

async myAction ({ state }) {
  state.doSave = false

  let modalClosed
  let someDataToShowInModal = {}

  let data1 = []
  let data2 = []
  let data3 = []
  let data4 = []
  let data5 = []

  // #1. Push difference to "data[1-5]"
  data1.push(xyz1)
  data2.push(xyz2)
  data3.push(xyz3)
  data4.push(xyz4)
  data5.push(xyz5)

  // #2. Based on data[1-5] prepare "someDataToShowInModal"
  someDataToShowInModal = {xyz}

  // #3. We change "state.modalTextSummary" and by this we open
  // a Modal (because "myModalCompont" has "watch: {modalTextSummary}")
  state.modalTextSummary = someDataToShowInModal

  // #4. Wait until user closes modal or clicks OK
  const unwatch = store.watch(
    (state) => state.doSave,
    (value) => {

      // #5. Apply changes
      if (value === true) {
        unwatch()
        // ... code which handles data from data[1-5]

      } else if (value === 'unwatch') {
        unwatch()
      }
    }
  )
}

왜 해야 하지?unwatch()?

저 같은 경우에는myAction는 "someButton"(예명)에 의해 호출되고 그 결과 모달(modal)이 열립니다.모드를 5번 열고 닫으면 OK 버튼을 클릭하여 시청합니다.state.doSave, 는, 「5」, 「6」의 「 5 」 、 「 6 」 、 「 6 」 、 「 OK 」data[1-5]6시 30분때문에 OK .state.doSave.

myModalComponent.js

<template>
  <b-modal
    ref="myModal"
    ok-title="OK"
    cancel-title="Close"
    @keydown.native.enter="closeModalAndSave"
    @ok="closeModalAndSave"
    @hide="closeModalAndUnwatch"
  >
    {{ modalTextSummary }}
  </b-modal>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState([
      'modalTextSummary'
    ])
  },

  watch: {
    modalTextSummary: function () {
      if (this.modalTextSummary !== {}) {
        this.$refs.myModal.show()
      }
    }
  },

  methods: {
    ...mapMutations('media', [
      'doSave'
    ]),

    closeModalAndUnwatch (bvEvent) {
      // "this.$refs.myModal.hide()" fires @hide with "bvEvent.trigger === null".
      // We need to 'unwatch' just when bvEvent.trigger === 'cancel' or 'backdrop',
      // or 'header-close', ie not null.
      if (bvEvent.trigger !== null) {
        this.doSave('unwatch')
      }
    },

    closeModalAndSave () {
      this.doSave(true)
      this.$refs.myModal.hide()
    }
  } // End of "methods"
}
</script>

언급URL : https://stackoverflow.com/questions/54533464/how-to-wait-until-modal-is-closed-and-continue-execution-based-on-either-ok-or-c