Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Vue Communicates with the Internet Chapter 14

Getting ready

This recipe is a little complex, but, does not use advanced concepts. You are expected,
nonetheless, to be familiar with using Vue.

We will be using Axios for this recipe. You can complete the Sending basic AJAX requests
with Axios recipe if you are unsure of what it exactly entails.

How to do it...

You will build a website for ordering pizzas on Mt. Everest. The area has a notoriously poor

Internet connection, so we may want to retry a couple of times before giving up on our

pizza.

This is what our HTML looks like:

<div id="app">

<h3>Everest pizza delivery</h3>

<button @click="order"

:disabled="inProgress">Order pizza!</button>

<span class="spinner" v-show="inProgress"> </span>

<h4>Pizza wanted</h4>

<p>{{requests}}</p>

<h4>Pizzas ordered</h4>

<span v-for="pizza in responses">

{{pizza.id}}:{{pizza.req}}

</span>

</div>

We have a button to place orders that will be disabled while an order is in progress--a list of

orders in progress (that will contain only one order for the moment) and a list of pizzas
already ordered.

We can add a spinner to make the waiting a bit more pleasant. Add this CSS to make the

little pizza spin:

@keyframes spin {

100% {transform:rotate(360deg);}

}

.spinner {

width: 1em;

height: 1em;

padding-bottom: 12px;

display: inline-block;

animation: spin 2s linear infinite;