Looping through values in VueJS from 100 to 0

Question

Looping through values in VueJS from 100 to 0

I am currently working on creating a power meter that will smoothly transition from 100 to 0 and back again to 100. The idea is for the user to press a button, causing the meter to stop at a random value.

I just need some assistance in getting the loop function to work correctly.

export default {
  data() {
    return {
      
      power: 100,
     
    };
  },
}


watch:{
power: {
      handler(value) {
        if (value == 100 || value > 0) {
          setTimeout(() => {
            this.power--;
          }, 100);
        } if (value == 0) {
          setTimeout(() => {
            this.power++;
          }, 100);
        
        }
      },
      immediate: true 
    },
}

javascript vue.js

Answer 1

Answer №1

Perhaps there are alternative solutions available, but here is one that I thought of:

<template>
  <section v-if="!showPart">
    <!-- This section displays when the program is cycling through numbers -->
    <div v-if="power1">
      {{power}}
    </div>
    <div v-else>
      {{powerReverse}}
    </div>
  </section>
  <div v-else>
    <!-- This section displays when the user clicks to select a number -->
    {{showValue}}
  </div>
  <button @click="stopFunc">{{textBtn}}</button>
</template>

<script>
export default {
  name: "powerCompo",
  data() {
    return {
      speed: 100, // speed of loop
      power: 99, // start point of loop
      power1: true, // for changing view between increase and decrease states
      powerReverse: 0, // for increasing loop after reaching "0"
      showValue: "nothing selected", // displaying the selected value
      decrease: null, // for clearing "timeout" in decrease mode
      increase: null, // for clearing "timeout" in increase mode
      showPart: false, // for toggling between "loop" or "stop" modes
      textBtn: "click for stop" // defines the button text
    };
  },
  watch:{
    power: {
      handler(value) {
        this.decrease = setTimeout(() => {
          this.power--;
        }, this.speed);

        if (this.power === 0) {
          clearTimeout(this.decrease);
          console.log("decrease");
          this.power1 = false;
          this.powerReverse = 0;
          this.powerReverse++;
        }
      },
      immediate: true
    },
    powerReverse(newValue) {
      this.increase = setTimeout(() => {
        this.powerReverse++;
      }, this.speed);

      if (this.powerReverse === 100) {
        clearTimeout(this.increase);
        console.log("increase");
        this.power1 = true;
        this.power = 100;
        this.power--;
      }
    }
  },
  methods: {
    stopFunc: function ($event) {
      /* This function is called each time the user clicks on the button. If the button text is "click for cycling again", it calls "resetFunc()" method; otherwise, it stops looping and shows the selected value. */
      if ($event.target.innerText === "click for cycling again") {
        this.resetFunc();
      } else {
        if (this.power1) {
          this.showValue = this.power;
          if (this.showValue === 100) {
            this.showValue = 99;
            this.power = 99;
          }
        } else {
          this.showValue = this.powerReverse;
        }
        this.showPart = true;
        clearTimeout(this.increase);
        clearTimeout(this.decrease);
        this.textBtn = "click for cycling again"
      }
    },
    resetFunc: function () {
      clearTimeout(this.increase);
      clearTimeout(this.decrease);
      this.textBtn = "click for stop"
      this.showPart = false;
      this.power= 100;
      this.power1= true;
    }
  }
}
</script>

Using the above component, you can iterate between [1, 99].

Answer 2

Perhaps there are alternative solutions available, but here is one that I thought of:

<template>
  <section v-if="!showPart">
    <!-- This section displays when the program is cycling through numbers -->
    <div v-if="power1">
      {{power}}
    </div>
    <div v-else>
      {{powerReverse}}
    </div>
  </section>
  <div v-else>
    <!-- This section displays when the user clicks to select a number -->
    {{showValue}}
  </div>
  <button @click="stopFunc">{{textBtn}}</button>
</template>

<script>
export default {
  name: "powerCompo",
  data() {
    return {
      speed: 100, // speed of loop
      power: 99, // start point of loop
      power1: true, // for changing view between increase and decrease states
      powerReverse: 0, // for increasing loop after reaching "0"
      showValue: "nothing selected", // displaying the selected value
      decrease: null, // for clearing "timeout" in decrease mode
      increase: null, // for clearing "timeout" in increase mode
      showPart: false, // for toggling between "loop" or "stop" modes
      textBtn: "click for stop" // defines the button text
    };
  },
  watch:{
    power: {
      handler(value) {
        this.decrease = setTimeout(() => {
          this.power--;
        }, this.speed);

        if (this.power === 0) {
          clearTimeout(this.decrease);
          console.log("decrease");
          this.power1 = false;
          this.powerReverse = 0;
          this.powerReverse++;
        }
      },
      immediate: true
    },
    powerReverse(newValue) {
      this.increase = setTimeout(() => {
        this.powerReverse++;
      }, this.speed);

      if (this.powerReverse === 100) {
        clearTimeout(this.increase);
        console.log("increase");
        this.power1 = true;
        this.power = 100;
        this.power--;
      }
    }
  },
  methods: {
    stopFunc: function ($event) {
      /* This function is called each time the user clicks on the button. If the button text is "click for cycling again", it calls "resetFunc()" method; otherwise, it stops looping and shows the selected value. */
      if ($event.target.innerText === "click for cycling again") {
        this.resetFunc();
      } else {
        if (this.power1) {
          this.showValue = this.power;
          if (this.showValue === 100) {
            this.showValue = 99;
            this.power = 99;
          }
        } else {
          this.showValue = this.powerReverse;
        }
        this.showPart = true;
        clearTimeout(this.increase);
        clearTimeout(this.decrease);
        this.textBtn = "click for cycling again"
      }
    },
    resetFunc: function () {
      clearTimeout(this.increase);
      clearTimeout(this.decrease);
      this.textBtn = "click for stop"
      this.showPart = false;
      this.power= 100;
      this.power1= true;
    }
  }
}
</script>

Using the above component, you can iterate between [1, 99].

Looping through values in VueJS from 100 to 0

Answer №1

Similar questions

Enhancing code readability in vim with custom Javascript syntax highlighting

Having trouble with my ASP.Net OnClick Subs not functioning as desired

The CSS toggle feature in the React component is not being implemented as expected

Registration of Laravel Vue.js components

Looking for assistance with deleting a child element in an XML file using PHP

Socket.io connects two clients together in a room

A guide to resolving the Postgres issue: "The bind message provides 8 parameters while the prepared statement "" only needs 6."

The AJAX response containing jQuery is failing to produce any visible changes

Retrieving Records within a Specific Date Range for Check-ins and Check-outs

What is the method for implementing an Inset FAB with Material UI in a React project?

When the browser's back button is clicked, no action occurs with Next/router

Can someone guide me on how to extract checkbox values in a post method using Angular

Trigger a Tabulator event when a checkbox is selected in Vue 3

Prevent user input when an alert window is open

What could be causing the data in Vue Dev Tools to not update properly?

"Looping through each item in a list using Angular

Converting an array of objects to an array based on an interface

Tips for customizing the time selector in material-ui-time-picker

Waiting for a webpage to fully load with JavaScript in Selenium

Emphasize the search term "angular 2"