Working Countdown timer for VUE JS 2, ES6, ES Lint errors free!

[dodanex]

I made this Countdown Timer compatible with VUE JS 2 and, compiled to ES6, ES Lint errors free!

Create a new file inside src\components\Countdown.vue

Add this code inside Countdown.vue:

<template>
  <div>
    <div class="block">
      <p class="digit">{{ days | two_digits }}</p>
      <p class="text">Days</p>
    </div>
    <div class="block">
      <p class="digit">{{ hours | two_digits }}</p>
      <p class="text">Hours</p>
    </div>
    <div class="block">
      <p class="digit">{{ minutes | two_digits }}</p>
      <p class="text">Minutes</p>
    </div>
    <div class="block">
      <p class="digit">{{ seconds | two_digits }}</p>
      <p class="text">Seconds</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    date: null
  },

  data () {
    return {
      now: Math.trunc((new Date()).getTime() / 1000),
      event: this.date
    }
  },

  computed: {
    calculatedDate () {
      this.event = Math.trunc(Date.parse(this.event) / 1000)
      return this.event
    },
    seconds () {
      return (this.calculatedDate - this.now) % 60
    },
    minutes () {
      return Math.trunc((this.calculatedDate - this.now) / 60) % 60
    },
    hours () {
      return Math.trunc((this.calculatedDate - this.now) / 60 / 60) % 24
    },
    days () {
      return Math.trunc((this.calculatedDate - this.now) / 60 / 60 / 24)
    }
  },

  mounted () {
    window.setInterval(() => {
      this.now = Math.trunc((new Date()).getTime() / 1000)
    }, 1000)
  }
}
</script>

<style>
.block {
  float: left;
  margin: 20px;
}
.text {
  text-align: center;
}
.digit {
  margin: 10px;
  text-align: center;
}
</style>

To use the counter inside your project, import it:

<template>
  <div class="container">
    <h1>COUNTDOWN TIMER</h1>

    <countdown date="2017-06-31 00:00:00"></countdown>

  </div>
</template>

<script>
import Countdown from './../../components/Countdown.vue'
export default {
  components: { Countdown }
}
</script>

[thedangler]

failed to resolver filter two_digits is the error I get when trying to use this. and its showing everything in negative numbers

[syed-haroon]

@thedangler create filters, may be below props:

props: {
  date: null
},

filters: {
  two_digits (value) {
    if (value.toString().length <= 1) {
      return '0' + value.toString()
    }
    return value.toString()
  }
},

the code tested, and it works in above Vue.js 2.
I have modified a bit the filters code from below url to make it work on Vue.js 2:
http://fareez.info/blog/countdown-timer-using-vuejs/ (it's older vue.js 1.x)