[Vuejs]-Adding up on input through setInterval doesn't work

0👍

Basically, here you need to use clearInterval to stop the interval that is created, and reset the counter to zero.

console.clear()
var Main = {
  data() {
    return {
      val1: false,
      val2: 0,
      interval: null
    }
  },
  methods: {
    switchOn(){
      this.val1 = !this.val1
      if (!this.val1){
        clearInterval(this.interval)
        this.interval = null
        this.val2 = 0
      } else {
       this.addUp()
      }
    },
    addUp(){
      this.interval = setInterval(() => this.val2++, 2000);
    }
  },
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <input v-model="val2" v-if="val1">
  <br/>
  <button @click="switchOn">Change</button>
  {{val1}}: {{val2}}

</div>
👤Bert

Leave a comment