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

Next, you'll build a Vue app that communicates with the server seamlessly. Now, since the

server is running in your local environment through HTTP, you will not be able to use
JSFiddle because it works on HTTPS and considers HTTP insecure. You can either use other

methods described earlier or use services on HTTP, such as codepen.io or others.

You will code an app that manages sticky messages. We want to be able to view, add, edit,

and delete them.

Type the following in this HTML:

<div id="app">

<h3>Sticky messages</h3>

<ol>

<li v-for="message in messages">

<button @click="deleteItem(message._id)">Delete</button>

<button @click="edit(message._id, message.text)">

edit

</button>

<input v-model="message.text">

</li>

</ol>

<input v-model="toAdd">

<button @click="add">add</button>

</div>

Our Vue instance state will consist of a list of recorded messages, plus a temporary message

to be added to the list:

new Vue({

el: '#app',

data: {

messages: [],

toAdd: ''

},

})

The first thing that we want to do is ask the server for a list of messages. Write the created
hook for this:

created () {

axios.get('http://localhost:3030/messages/')

.then(response => {

this.messages = response.data.data

})

},