vue js 팝업에서 카운트다운 타이머가 작동하지 않음

vue js 팝업에서 카운트다운 타이머가 작동하지 않음

카운트다운 후에 다른 사이트로 리다이렉트 하려고 합니다.리다이렉트는 동작하지만 카운트다운은 1회만 감소합니다.

예를 들어 다음과 같습니다.카운터를 5로 설정했습니다.그러나 팝업이 열리면 4가 표시되고 더 이상 줄어들지 않습니다.

<p>Redirecting in {{ counter }}</p>

<script>
export default {
    name: "modal",
    data() {
        return {
            toggleModal: false,
            counter: 5
        }
    },
    methods: {
        showModal() {
            this.toggleModal = true;
            this.countDown();
        },
        countDown() {
            if(this.counter > 0) {
                this.counter--;
                setTimeout(() => {
                    window.location.href = 'https://www.google.com';
                }, 5000);
            }
        },
    }
};
</script>

기본적으로 현재 코드에서는 5초 동안 대기하고 리다이렉트하고 있습니다.리다이렉트 하는 것의 부작용 중 하나는 카운트다운을 1씩 줄이는 것입니다.

필요한 것은 카운터를 1초마다 0이 될 때까지 줄이고 다음 체크박스에서 리다이렉트를 실행하는 것입니다.

먼저 카운트다운이 어느 정도인지 확인함으로써 이 작업을 수행합니다.0보다 크면 1초 정도 기다렸다가 카운터를 1만큼 줄인 후 다시 확인합니다.

countDown() {
    //If the counter has not reached the end
    if(this.counter > 0) {
        //Wait 1 second, then decrement the counter
        setTimeout(()=>{
            this.counter--;
            this.countDown();
        },1000)
    }
    else
    {
        //Count down has reached zero, redirect
        window.location.href = 'https://www.google.com';
    }
},

언급URL : https://stackoverflow.com/questions/68598954/countdown-timer-not-working-in-vue-js-pop-up