how to reset the data value in modal in vue after close-CodePudding

So I receive this object called business in my modal as a prop and if business.type is international then I want it to redirect to another website after 10 seconds. If it is national then I want to stay in the website. However, suppose if I open the international modal first and then close the modal then it still redirects me to the another website. I want that only if I wait for the 10 seconds then I get redirected to the other website and if I close the modal then the second is reset and I don't get redirected.

My code looks like this right now:

<template>
 <modal :show="show" @close="onClose()">
   <div v-if="business.type==='international'">
    redirecting in {{seconds}}
   </div>
   <div v-if="business.type==='national'">
    Welcome to our page
   </div>
 </modal>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: false,
    },
    business: {
      type: Object,
      required: true,
    },
  },
 data() {
    return {
      seconds: 10,
      showingModal: false,
    }
  },
 watch: {
    show(val) {
      this.showingModal = val
      if (this.showingModal) this.countDownTimer()
    },
  },
  computed: {
    newBusiness() {
      return this.business
    },
  },
  methods: {
    countDownTimer() {
      if (this.seconds > 0) {
        setTimeout(() => {
          this.seconds -= 1
          this.countDownTimer()
        }, 1000)
      }
      if (this.seconds === 0 && this.newBusiness.type === 'international') {
        this.$emit('close')
        window.location.replace(`${this.business.website}`)
      }
    },
    onClose() {
      this.seconds = 10
      this.$emit('close')
    },
  },
}
</script>

CodePudding user response：

Save your Timeout in a variable to clear it (stop your countDown loop) when you close your modal. Here an exemple with a variable "timer":

<script>
export default {
 data() {
    return {
      seconds: 10,
      showingModal: false,
      timer: null,
    }
  },
  methods: {
    countDownTimer() {
      if (this.seconds > 0) {
        this.timer = setTimeout(() => {
          this.seconds -= 1
          this.countDownTimer()
        }, 1000)
      }
      if (this.seconds === 0 && this.newBusiness.type === 'international') {
        this.$emit('close')
        window.location.replace(`${this.business.website}`)
      }
    },
    onClose() {
      if (this.timer) clearTimeout(this.timer)
      this.seconds = 10
      this.$emit('close')
    },
  },
}
</script>

CodePudding user response：

You can save the timer id, which is returned from setTimeout function. and after close the modal, clear time out using clearTimeout

CodePudding user response：

There's no need to close the modal before redirection.

<template>
 <modal :show="show" @close="$emit('close')">
   <div v-if="business.type === 'international'">
    redirecting in {{ seconds }}
   </div>
   <div v-if="business.type === 'national'">
    Welcome to our page
   </div>
 </modal>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: false,
    },
    business: {
      type: Object,
      required: true,
    },
  },
 data() {
    return {
      seconds: 10,
    }
  },
  
  mounted(){
    if(this.business.type === 'international'){
      setInterval(() => {
        if(this.seconds < 1){
          window.location.replace(`${this.business.website}`)
        }

        --this.seconds;
      }, 1000);
    }
  }
}
</script>