Vue Communicates with the Internet Chapter 14In our Vue instance, we write all the support code to send the comment to our server,
which, in this case, will be http://jsonplaceholder.typicode.com/comments, a fake REST
interface that will behave like a real server.
Here's the submit method that is triggered by the press of the Submit button:
methods: {
submit () {
axios.post('http://jsonplaceholder.typicode.com/comments',
{
body: this.message
}).then(response => {
this.response = response.data
})
}
}The state of the Vue instance will only be two variables:
data: {
message: '',
response: '...'
}As usual, we want to mount it to the
app:
new Vue({
el: '#app',
...As soon as the instance is mounted, we want to install the word filter in Axios; for this, we
tap into the mounted hook of Vue:
mounted () {
axios.interceptors.request.use(config => {
const body = config.data.body.replace(/punk/i, '***')
config.data.body = body
return config
})
}