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

JavaScript- Tabbed Navigation with Lists as the Content

What makes 'Parsing JSON with jQuery' unnecessary?

JavaScript: Discovering the art of "utilizing RESTful APIs"

Using Javascript/JQuery to extract numbers from a URL with regex or alternative methods

Tips for avoiding html entities in a string

Why does my POST request result in an express get being triggered?

Change the value of a single element in an array using a component in ReactJS

Inform jQuery that the draggable element is in the process of being dragged dynamically

personalizing material-ui component styles – set select component color to be pure white

In the production mode, Nuxt styles may not be properly applied

To achieve the desired format, where should I press or manipulate the information?

Why is it that when I refresh the page in Angular, my logged-in user is not being recognized? What could be causing this

Retrieve a targeted data value from a JSON object based on an array value

Is there a way to use AJAX for transferring a value?

Determining Adjacency of <li> Elements Using jQuery Sortable() and Class Comparison

Enhanced jQuery implementation for hiding elements

Utilizing server-side cookies in next.js and nest.js for efficient data storage

Vue: Storing selected list values in an array

Implementing Ideone API functionality on Codeigniter with the use of ajax, javascript, and soapclient

Month and year selection feature in ExtJS 4 catalog