Vue Communicates with the Internet Chapter 14The POST verb is used to add a new message to the list. Note how it's not idempotent, as
even with the same text in the sticky message, we nonetheless create a new message that
differs in ID when pressing the add button.
Pressing the edit button triggers a PUT and the Delete button, well, you can imagine that it
uses the DELETE verb.
Axios makes this very clear by naming the methods of its API with the verbs themselves.
Implementing infinite scrolling
Infinite scrolling is a fine example of what you can do with Vue and AJAX. It is also quite
popular and can improve interaction for some kind of content. You will build a random
word generator that works with infinite scrolling.
Getting ready
We will use Axios. Take a look at the Sending basic AJAX requests with Axios recipe to know
how to install it and its basic functionality. Other than that, you don't need to know much
to follow along.
How to do it...
To make our app work, we will ask random words from the http://www.setgetgo.com/
randomword/get.php endpoint. Every time you point the browser at this address, you will
get a random word.
The whole page will consist solely of an infinite list of words. Write the following HTML:
<div id="app">
<p v-for="word in words">{{word}}</p>
</div>The list of words needs to grow as we scroll down. So we need two things: understanding
when the user reaches the bottom of the page, and getting new words.