Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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>

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading