Instantly share code, notes, and snippets.

@laracasts /Count.vue Secret
Last active Nov 19, 2018

Embed
What would you like to do?
<template>
<span v-text="count"></span>
</template>
<script>
import inView from 'in-viewport';
export default {
props: ['to'],
data() {
return {
count: 0,
interval: null
};
},
computed: {
increment() {
return Math.ceil(this.end / 30);
}
},
mounted() {
inView(this.$el, () => {
this.interval = setInterval(this.tick, 40);
});
},
methods: {
tick() {
if (this.count + this.increment >= this.end) {
this.count = this.to;
return clearInterval(this.interval);
}
this.count += this.increment;
}
}
};
</script>
<count :to="1000"></count>
@edisonchenz

This comment has been minimized.

Copy link

edisonchenz commented Sep 14, 2018

where is 'this.end'

@yxj0312

This comment has been minimized.

Copy link

yxj0312 commented Nov 16, 2018

where is 'this.end'

guess it should be this.to. or jeff had a new data 'end' somewhere else.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment