Full-Stack Web Development with Vue.js and Node

(singke) #1
Building the Real Application Chapter 5

Now, let's modify our AddMovie.vue to display the flash message when the action is


performed successfully or when it fails:


...
methods: {
submit() {
if (this.$refs.form.validate()) {
return axios({
method: 'post',
data: {
name: this.name,
description: this.description,
release_year: this.release_year,
genre: this.genre,
},
url: 'http://localhost:8081/movies',
headers: {
'Content-Type': 'application/json',
},
})
.then(() => {
this.$swal(
'Great!',
'Movie added successfully!',
'success',
);
this.$router.push({ name: 'Home' });
this.$refs.form.reset();
})
.catch(() => {
this.$swal(
'Oh oo!',
'Could not add the movie!',
'error',
);
});
}
return true;
},
clear() {
this.$refs.form.reset();
},
},
...
Free download pdf