Vue Communicates with the Internet Chapter 14The method will recursively call itself until the page has enough words to fill the whole
browser view.
Since this method needs to be called every time we reach the bottom, we will watch for the
bottom variable and fire the method if it's true. Add the following option to the Vue
instance just after the data:
watch: {
bottom (bottom) {
if (bottom) {
this.addWord()
}
}
}We also need to call the addWord method in the created hook to kick-start the page:
created () {
window.addEventListener('scroll', () => {
this.bottom = this.bottomVisible()
})
this.addWord()
}If you launch the page now, you will have an infinite stream of random words, which is
useful when you need to create a new password!
How it works...
In this recipe, we used an option called watch, which uses the following syntax:
watch: {
'name of sate variable' (newValue, oldValue) {
...
}
}This is the counterpart of computed properties when we are not interested in a result after
some reactive variable changes. As a matter of fact, we used it to just fire another method.
Had we been interested in the result of some calculations, we would have used a computed
property.