Skip to content

Commit 6f4374b

Browse files
authored
updated the vue to comply with vuejs 2
1 parent af0460c commit 6f4374b

File tree

1 file changed

+33
-34
lines changed

1 file changed

+33
-34
lines changed

src/components/Countdown.vue

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -17,56 +17,56 @@
1717
</div>
1818
</template>
1919
<script>
20-
export default {
20+
export default {
2121
22-
ready() {
23-
window.setInterval(() => {
24-
this.now = Math.trunc((new Date()).getTime() / 1000);
25-
},1000);
26-
},
22+
props: {
23+
date: null,
24+
},
2725
28-
props : {
29-
date : {
30-
type: Number,
31-
coerce: str => Math.trunc(Date.parse(str) / 1000)
32-
}
33-
},
26+
data: function() {
27+
return {
28+
now: Math.trunc((new Date()).getTime() / 1000),
29+
event: this.date,
30+
}
31+
},
3432
35-
data() {
36-
return {
37-
now: Math.trunc((new Date()).getTime() / 1000)
38-
}
39-
},
33+
computed: {
34+
// using computed to take care of the calculation per the doc
35+
calculatedDate: function() {
36+
return this.event = Math.trunc(Date.parse(this.event) / 1000);
37+
},
38+
seconds: function() {
39+
return (this.calculatedDate - this.now) % 60;
40+
},
4041
41-
computed: {
42-
seconds() {
43-
return (this.date - this.now) % 60;
44-
},
42+
minutes: function() {
43+
return Math.trunc((this.calculatedDate - this.now) / 60) % 60;
44+
},
4545
46-
minutes() {
47-
return Math.trunc((this.date - this.now) / 60) % 60;
48-
},
46+
hours: function() {
47+
return Math.trunc((this.calculatedDate - this.now) / 60 / 60) % 24;
48+
},
4949
50-
hours() {
51-
return Math.trunc((this.date - this.now) / 60 / 60) % 24;
50+
days: function() {
51+
return Math.trunc((this.calculatedDate - this.now) / 60 / 60 / 24);
52+
}
5253
},
53-
54-
days() {
55-
return Math.trunc((this.date - this.now) / 60 / 60 / 24);
54+
55+
// new ready function
56+
mounted: function () {
57+
window.setInterval(() => {
58+
this.now = Math.trunc((new Date()).getTime() / 1000);
59+
},1000);
5660
}
5761
}
58-
}
59-
6062
</script>
6163
<style>
6264
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400|Roboto:100);
63-
6465
.block {
6566
display: flex;
6667
flex-direction: column;
6768
margin: 20px;
6869
}
69-
7070
.text {
7171
color: #1abc9c;
7272
font-size: 40px;
@@ -76,7 +76,6 @@ export default {
7676
margin-bottom: 10px;
7777
text-align: center;
7878
}
79-
8079
.digit {
8180
color: #ecf0f1;
8281
font-size: 150px;

0 commit comments

Comments
 (0)