Vue js - 대화상자에서 응답을 받아 Vue 라우터 + Vuetify를 사용한 탐색 확인

Vue js - 대화상자에서 응답을 받아 Vue 라우터 + Vuetify를 사용한 탐색 확인

vuetify 대화상자가 있는 vue 템플릿(그러나 실제로 해당 대화상자가 있는 경우)을 사용하여 vue-Router의 이전RouteLeave 메소드에 있는 페이지에서 항법항해를 확인하는 방법은?

dialogTest.vue:

<template>
    <v-container>
        <v-layout>
            <v-dialog v-model="dialog" max-width="290" ref="popup">
                <v-card>
                    <v-card-title class="headline">Are you sure you wish to leave this page?</v-card-title>
                    <v-card-text>Better think long and hard.</v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="primary darken-1" flat="flat" @click.native="dialog = false">Nah</v-btn>
                        <v-btn color="primary darken-1" flat="flat" @click.native="dialog = false">Yah</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </v-layout>
    </v-container>
</template>

<script src="./dialogTest.ts"></script>

dialogTest.ts:

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

Component.registerHooks([
    'beforeRouteLeave'
]);

@Component
export default class DialogTestComponent extends Vue {

    dialog: boolean = false;

    beforeRouteLeave(to: Object, from: Object, next: Function) {
        console.log('beforeRouteLeave');

        //this works, but obviously doesn't use our dialog -> how do we get yah or nah response from dialog instead?
        const answer =  window.confirm('Do you really want to leave? you have unsaved changes!')
        if (answer) {
            next()
        } else {
            next(false)
        }
    }
}

나는 약속으로 이것을 하는 것을 좋아한다.대화 상자에 약속을 반환하는 팝() 메소드를 지정한 다음 사용자가 선택할 때 약속을 참 또는 거짓으로 해결하십시오.또는 장치 테스트에서 clickYah()를 호출하십시오.이런 거...

// in your dialog component....
data(){
    return {active : false, resolve: null};
}
methods : {
    pop(){
        this.active = true;
        return new Promise(function(resolve, reject){
            this.resolve = resolve;
        });
    },
    clickYah(){
        this.active = false;
        this.resolve(true);
    },
    clickNah(){
        this.active = false;
        this.resolve(false);
    }
}

// then to call it...
this.$refs.modalDialog.pop()
.then(confirmResult => next(confirmResult));

@bbsimonb - 위대하고 빠른 대답에 감사한다.

여기 내 결승전이 있다.

상위 구성 요소(Ref="ConfirmLevelPop"이 포함된 ConfirmLeveDialog 구성 요소 포함):

async beforeRouteLeave(to: Object, from: Object, next: Function) {
    next(await (this.$refs.confirmLeavePopup as ConfirmLeaveDialog).pop()); 
}

ConfirmLeveDialog vue 클래스 구성 요소(구성 요소의 resolve func 스토리지 이름을 대신 "answer"로 변경):

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

@Component
export default class ConfirmLeaveDialog extends Vue {

    @Prop({ default: 'Are you sure you wish to leave this page?' })
    question: any;

    active: boolean = false;
    answer: Function = () => { return false }; //. had to provide the type and initialize

    pop(): Promise<boolean> {
        this.active = true;
        return new Promise<boolean>((resolve: Function, reject: Function) => { //. note the arrow function here such that 'this' refers to the component, NOT the calling context
            this.answer = resolve;
        });
    };

    confirmLeave(): void {
        this.active = false;
        this.answer(true);
    };

    abortLeave(): void {
        this.active = false;
        this.answer(false);
    }
}

$ref를 사용하지 않고 구성 요소에 v-dialog가 있는 경우

템플릿:

<v-dialog v-model="openDialog">
   <v-btn @click="dialogResponse(true)">Yes</v-btn>
   <v-btn @click="dialogResponse(false)">No</v-btn>
</v-dialog>

스크립트:

data() { return { openDialog: false, functionResolve: null } },

beforeRouteLeave(to, from, next) {
    this.openDialog = true
    this.createPromise().then(res => {
      next(res)
    })
},

methods: {
  createPromise() {
    return new Promise(resolve => {
      this.functionResolve = resolve;
    })
  },
  dialogResponse(response) {
    this.functionResolve(response)
  },
}

참조URL: https://stackoverflow.com/questions/49045159/vue-js-get-answer-from-dialog-to-confirm-navigation-w-vue-router-vuetify