如何在关闭后以Vue中的模态重置数据值

Question

因此，我在我的模态中接收到称为business的对象作为道具，如果business.type是国际的，那么我希望它在10秒后将其重定向到另一个网站。如果是国家，我想留在网站上。但是，假设我先打开国际模式，然后关闭模式，那么它仍然会将我重定向到另一个网站。我希望只有在等待10秒钟，然后将其重定向到另一个网站，如果我关闭模式，那么第二个是重置的，而我不会被重定向。

我的代码现在看起来像这样：

<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>

Answer 1

关闭模式时，将超时保存在变量中以清除它（停止倒计时循环）。
在这里，有一个可变“计时器”的景象：

<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>

Answer 2

您可以保存从settimeout函数返回的计时器ID。
关闭模态后，使用cleartimeout清除时间出去

Answer 3

重定向前无需关闭模态。

<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>