关闭后如何在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>

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

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

javascript

vue.js

vuejs2