[Vuejs]-Vuejs binding Progress Circle with text active class

by

0👍

Track your percent in a variable. Then compare if the percent passes text line’s percent.

Checkout code snippet below.

<template>
  <div id="app">
    <ol>
      <li v-for="(todo, index) in todos" :key="index">
        <label :class="{ passed: percent >= todo.percent }">
          {{ todo.text }}
        </label>
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { text: "Learn JavaScript", percent: 20 },
        { text: "Learn Vue", percent: 40 },
        { text: "Play around in JSFiddle", percent: 60 },
      ],
      percent: 10,
      interval: null,
    }
  },
  methods: {
    increasePercent: function() {
      this.percent += 10
    },
  },
  created() {
    this.interval = setInterval(this.increasePercent, 500)
  },
}
</script>

<style lang="scss">
li {
  margin: 8px 0;
  font-weight: bolder;
  label {
    opacity: 0.4;
    &.passed {
      opacity: 1;
      text-decoration: line-through;
    }
  }
}
</style>

JSFiddle

Leave a comment