Skip to content

Instantly share code, notes, and snippets.

@laracasts
Last active June 16, 2020 10:15
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save laracasts/784f03557f054b85dde073cbf2a73350 to your computer and use it in GitHub Desktop.
Save laracasts/784f03557f054b85dde073cbf2a73350 to your computer and use it in GitHub Desktop.
<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
Copy link

where is 'this.end'

@yxj0312
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