pory
167
2018-07-12 06:15:04
3
315

Vue.js, Vuetify.js로 Custom confirm dialog를 만드려고 하는데요..



<template>
  <v-container>
    <v-dialog v-model="visible">
      <v-card>
        <v-card-text>
          정말 삭제하시겠습니까?
        </v-card-text>
        <v-card-actions>
          <v-btn @click="ok">Yes</v-btn>
          <v-btn @click="no">No</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-btn @click="del">삭제하기</v-btn>
  </v-container>
</template>


export default {
  data () {
    return {
      ok: function () {},
      no: function () {},
      visible: false
    }
  },
  methods: {
    del () {
      this.openConfirm()
      .then(() => {
        // 삭제 로직
        console.log('삭제됨')
        this.visible = false
      })
      .catch(() => {
        // 취소 했을 경우
        console.log('삭제취소')
        this.visible = false
      })
    },
    openConfirm () {
      this.visible = true

      return new Promise(function (resolve, reject) {
        // ???
      })
    }
  }
}


버튼을 누르면 삭제 할 것인지 확인하는 Dialog 가 뜨고, ok 버튼을 누르면 삭제를 진행하고, no 버튼을 누르면 삭제가 취소되는 로직을 작성하고싶습니다.


삭제하기 @click = openConfirm() 함수를 호출하고, 이 함수는 promise 를 반환하게끔 짜려고합니다.

.then() 으로 삭제 로직을 진행하고, .catch() 로 삭제 취소 로직을 진행하려구요..


그런데 // ??? 이 부분의 코드를 어떤 식으로 채워넣어야 할지를 잘 모르겠네요.


ok 버튼을 누르면 resolve(), no 버튼을 누르면 reject() 함수를 호출하게끔 하고싶은데,


조금 생각해보니 말이안되는것 같기도 하고..


무한루프를 돌리면서 사용자의 응답을 기다려야되는지..


좋은 방법 있을까요? 


감사합니다.

0
0
  • 답변 3

  • beans9
    1k
    2018-07-12 07:11:26

    methods를 3개 만드세요, 

    openConfirm: visible = true

    ok: ok눌렀을때 처리

    no: visible = false 

    1
  • rezigrene
    508
    2018-07-12 09:41:22

    사용자지정이벤트를 활용하시는게 가장 나을듯합니다.


    상위컴포넌트에서 이용시

    <custom-confirm v-on:ok="승인시실행할함수"></ custom-confirm>
    


     dialog

    methods: {
      del: () => {
       this.visible = true;
      },
      ok: () => {
        this.visible =false;
        this.$emit("ok");
     }
    ..






    0
  • pory
    167
    2018-07-12 17:05:23

    두분 다 감사합니다.


    해당 컨펌을 여러군데에서 재사용하려고 고민을 거듭하다 promise라는게 있다는걸 알게되었는데,


    그냥 메서드 3개를 만들고, ok 로직을 콜백함수로 넘겨주는 방식이 제일 좋은가보네요.

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.