How to reset click counter in VueJs TypeScript?-CodePudding

I created a Counter component that should display the total of button clicks and reset after a given X mins.

in Counter.vue I have :

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class Counter extends Vue {
  valueNumber: number = 0;

  get formattedNumber() {
    return `Your total number is: ${this.valueNumber}`;
  }
</script>

My <template> is :

<div>
    <fieldset>
      <legend><p>You have clicked{{ this.formattedNumber }} times!</p></legend>
        <button @click="valueNumber">Click Here</button>
    </fieldset>
  </div>
</template>

But it is not working and I have yet to figure out how to reset it, any advice or guidance would be very much appreciated!

CodePudding user response：

Use setTimeout

const runAfter = 1000 * 60 * 10 // 10 minutes in miliseconds
setTimeout(() => {
 // set counter here 
}, runAfter)

CodePudding user response：

You have to use setInterval() if you want to reset the counter value after every X minutes or if you just want to reset it only once then you can use setTimeout() method.

Live Demo (I am resetting the counter in mounted hook but you can make it happen as per your requirement) :

new Vue({
  el: '#app',
  data: {
    valueNumber: 0
  },
  computed: {
    formattedNumber() {
      return `button : ${this.valueNumber}`;
    }
  },
  mounted() {
    setInterval(() => {
        this.valueNumber = 0
    }, 5000);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <fieldset>
      <legend><p>You have clicked {{ formattedNumber }} times!</p></legend>
        <button @click="valueNumber  = 1">Click Here</button>
    </fieldset>
</div>