Vue Communicates with the Internet Chapter 14For creating a new message, write a method that binds to the click of the add button and
send what's written in the input box to the server:
methods: {
add () {
axios.post('http://localhost:3030/messages/', {
text: this.toAdd
})
.then(response => {
if (response.status === 201) {
this.messages.push(response.data)
this.toAdd = ''
}
})
}
}Similarly, write a method for deleting a message and for editing a message:
deleteItem (id) {
console.log('delete')
axios.delete('http://localhost:3030/messages/' + id)
.then(response => {
if (response.status < 400) {
this.messages.splice(
this.messages.findIndex(e => e.id === id), 1)
}
})
},
edit (id, text) {
axios.put('http://localhost:3030/messages/' + id, {
text
})
.then(response => {
if (response.status < 400) {
console.info(response.status)
}
})
}